@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #1f2937; background: #ffffff; overflow-x: hidden; }
::selection { background-color: #6366f1; color: white; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* ===== GRADIENT TEXT ===== */
.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rotating-word-wrap { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; height: 1.15em; padding: 0 0.25em; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.rotating-word-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); border-radius: 0.2em; z-index: 0; }
.rotating-word { display: none; position: absolute; left: 0.25em; top: 0; white-space: nowrap; color: white !important; -webkit-text-fill-color: white !important; z-index: 1; }
.rotating-word.active { display: inline-block; position: relative; left: 0; }
.rotating-word.out { display: inline-block; }
.rotating-word .rw-letter { display: inline-block; opacity: 0; transform: translateY(110%); color: white !important; -webkit-text-fill-color: white !important; }
.rotating-word.active .rw-letter { animation: letterBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes letterBounceIn { 0% { opacity: 0; transform: translateY(110%); } 60% { opacity: 1; transform: translateY(-12%); } 80% { transform: translateY(4%); } 100% { opacity: 1; transform: translateY(0); } }
.rotating-word.out .rw-letter { opacity: 0; transform: translateY(-110%); transition: opacity 0.25s ease, transform 0.25s ease; }

/* ===== NAVBAR ===== */
.main-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid #f3f4f6; }
.nav-inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; height: 4rem; }
@media (min-width: 640px) { .nav-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .nav-inner { padding: 0 2rem; } }
.nav-brand { display: flex; align-items: center; }
.nav-brand-link { display: flex; align-items: baseline; }
.nav-brand-logo { height: 1.5rem; width: 1.5rem; margin-right: 0.5rem; margin-top: 0.75rem; }
.nav-brand-name { font-size: 1.5rem; font-weight: 700; color: #111827; }
.nav-brand-sub { color: #6b7280; font-size: 0.875rem; margin-left: 0.5rem; transition: color 0.2s; }
.nav-brand-sub:hover { color: #374151; }
.nav-links { display: none; align-items: center; gap: 2.5rem; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-link { color: #374151; font-weight: 500; transition: color 0.2s; position: relative; }
.nav-link:hover { color: #111827; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width 0.3s; }
.nav-link.active { color: #111827; }
.nav-link.active::after { width: 66.66%; }
.nav-link:hover::after { width: 100%; }
.nav-cta { background: #111827; color: white; padding: 0.5rem 1.25rem; border-radius: 0.5rem; font-weight: 500; transition: all 0.3s; white-space: nowrap; }
.nav-cta:hover { background: #1f2937; }
.nav-dropdown { position: relative; }
.nav-dropdown-btn { color: #374151; font-weight: 500; background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 0.5rem 0; font-size: inherit; font-family: inherit; transition: color 0.2s; }
.nav-dropdown-btn:hover { color: #111827; }
.nav-dropdown-btn .chevron-icon { margin-left: 0.375rem; font-size: 0.75rem; transition: transform 0.2s; }
.nav-dropdown:hover .chevron-icon { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; left: 50%; transform: translateX(-50%); margin-top: 0; width: 14rem; background: white; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); padding: 0.5rem 0; opacity: 0; visibility: hidden; transition: all 0.2s; z-index: 50; border: 1px solid #f3f4f6; }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; }
.nav-dropdown-item { display: block; padding: 0.75rem 1rem; font-size: 0.875rem; color: #374151; transition: all 0.2s; }
.nav-dropdown-item:hover { background: #f9fafb; }
.nav-dropdown-item.hover-blue:hover { color: #2563eb; }
.nav-dropdown-item.hover-amber:hover { color: #d97706; }
.nav-dropdown-item.hover-sky:hover { color: #0284c7; }
.nav-dropdown-item.hover-rose:hover { color: #e11d48; }
.nav-dropdown-item.hover-violet:hover { color: #7c3aed; }
.nav-dropdown-item.hover-teal:hover { color: #0d9488; }
.dropdown-icon { margin-right: 0.75rem; padding: 0.375rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; }
.dropdown-icon.blue { color: #3b82f6; background: #eff6ff; }
.dropdown-icon.amber { color: #f59e0b; background: #fffbeb; }
.dropdown-icon.sky { color: #0ea5e9; background: #f0f9ff; }
.dropdown-icon.rose { color: #f43f5e; background: #fff1f2; }
.dropdown-icon.violet { color: #8b5cf6; background: #f5f3ff; }
.dropdown-icon.teal { color: #14b8a6; background: #f0fdfa; }
.mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.375rem; color: #9ca3af; background: none; border: none; cursor: pointer; }
.mobile-menu-btn:hover { color: #6b7280; background: #f3f4f6; }
.mobile-menu-btn svg { width: 1.5rem; height: 1.5rem; }
.mobile-menu-wrapper { display: none; background: white; }
@media (min-width: 768px) { .mobile-menu-wrapper { display: none !important; } }
.mobile-menu-wrapper.open { display: block; }
.mobile-nav-btn-wrapper { display: none; }
@media (max-width: 767px) { .mobile-nav-btn-wrapper { display: flex; align-items: center; } }
.mobile-menu-inner { padding: 0.5rem 0.75rem 0.75rem; }
.mobile-nav-link { color: #374151; display: block; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 1rem; font-weight: 500; }
.mobile-nav-link:hover { color: #111827; }
.mobile-nav-link.active-mobile { background: #e5e7eb; color: #111827; }
.mobile-nav-cta { background: #111827; color: white; display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-weight: 500; text-align: center; margin-top: 0.5rem; }
.mobile-sub-nav { padding-left: 0.75rem; }
.mobile-sub-label { padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }
.mobile-sub-link { display: block; padding: 0.375rem 0.75rem; font-size: 0.875rem; color: #374151; border-radius: 0.375rem; }
.mobile-sub-link:hover { background: #f3f4f6; }

/* ===== REVEAL ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== HERO ===== */
.hero { position: relative; padding: 8rem 0 6rem; overflow: hidden; min-height: 90vh; display: flex; align-items: center; }
@media (max-width: 768px) { .hero { padding: 6rem 0 4rem; min-height: auto; } }
.hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; gap: 3rem; } }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: float 8s ease-in-out infinite; }
.hero-orb-1 { width: 500px; height: 500px; top: -10%; left: -5%; background: rgba(99,102,241,0.1); }
.hero-orb-2 { width: 400px; height: 400px; bottom: -10%; right: -5%; background: rgba(139,92,246,0.08); animation-delay: -3s; }
.hero-orb-3 { width: 300px; height: 300px; top: 40%; left: 50%; background: rgba(236,72,153,0.06); animation-delay: -5s; }
@keyframes float { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(20px,-30px) scale(1.05); } 66% { transform: translate(-15px,20px) scale(0.95); } }
.hero-content { position: relative; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; border-radius: 2rem; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.15); color: #6366f1; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.5rem; }
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #6366f1; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(99,102,241,0.4); } 50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(99,102,241,0); } }
.hero-title { font-size: 3.5rem; font-weight: 900; line-height: 1.05; color: #111827; margin-bottom: 1.25rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .hero-title { font-size: 4.5rem; } }
@media (max-width: 480px) { .hero-title { font-size: 2.5rem; } }
.hero-subtitle { font-size: 1.125rem; color: #6b7280; line-height: 1.6; margin-bottom: 2rem; max-width: 28rem; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.btn-primary { background: #111827; color: white; padding: 0.875rem 2rem; border-radius: 0.75rem; font-weight: 600; font-size: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s; }
.btn-primary:hover { background: #1f2937; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.btn-primary i { font-size: 0.875rem; transition: transform 0.2s; }
.btn-primary:hover i { transform: translateX(3px); }

.btn-view-integrations { display: inline-flex; align-items: center; gap: 0.875rem; padding: 1.125rem 2rem 1.125rem 2.5rem; font-size: 1rem; font-weight: 700; color: #6366f1; background: white; border: 2px solid #e5e7eb; border-radius: 3rem; text-decoration: none; position: relative; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 8px rgba(0,0,0,0.04); letter-spacing: -0.01em; }
.btn-view-integrations:hover { border-color: #6366f1; color: white; background: #111827; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.btn-view-integrations i { width: 2rem; height: 2rem; border-radius: 50%; background: #6366f1; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 8px rgba(99,102,241,0.3); }
.btn-view-integrations:hover i { background: white; color: #111827; transform: translateX(4px); }
.btn-lg { padding: 1rem 2.5rem; font-size: 1.0625rem; }
.btn-ghost { color: #374151; font-weight: 500; display: inline-flex; align-items: center; gap: 0.75rem; transition: color 0.2s; }
.btn-ghost:hover { color: #111827; }
.btn-ghost-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #d1d5db; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.btn-ghost-circle i { font-size: 0.625rem; }
.btn-ghost:hover .btn-ghost-circle { border-color: #6366f1; background: rgba(99,102,241,0.05); }

/* Hero cards */
/* Hero stats row */
.hero-stats-row { display: flex; align-items: center; gap: 2rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; }
@media (max-width: 640px) { .hero-stats-row { gap: 1.25rem; } }
.hero-stat { text-align: left; }
.hero-stat-val { font-size: 2rem; font-weight: 900; color: #111827; }
.hero-stat-suffix { font-size: 1.25rem; font-weight: 800; color: #6366f1; }
.hero-stat-lbl { display: block; font-size: 0.75rem; color: #9ca3af; font-weight: 500; margin-top: 0.125rem; }
.hero-stat-divider { width: 1px; height: 2.5rem; background: #e5e7eb; }

/* Floating channel icons */
.hero-float-icon { position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: white; border: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.04); z-index: 0; animation: heroIconFloat 8s ease-in-out infinite; }
.hfi-1 { top: 15%; right: 8%; color: #22c55e; animation-delay: 0s; }
.hfi-2 { top: 30%; right: 2%; color: #e11d48; animation-delay: -1.5s; }
.hfi-3 { bottom: 25%; right: 5%; color: #6366f1; animation-delay: -3s; }
.hfi-4 { bottom: 15%; left: 45%; color: #14b8a6; animation-delay: -4.5s; }
.hfi-5 { top: 20%; left: 42%; color: #3b82f6; animation-delay: -2s; }
.hfi-6 { bottom: 35%; left: 48%; color: #f59e0b; animation-delay: -5s; }
@keyframes heroIconFloat { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-15px); opacity: 0.7; } }
@media (max-width: 768px) { .hero-float-icon { display: none; } }

/* Hero visual — dashboard mockup */
.hero-visual { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .hero-visual { margin-top: 2rem; } }

.hero-mockup { background: white; border: 1px solid #e5e7eb; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02); width: 100%; max-width: 26rem; }
.hero-mockup-toolbar { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.hero-mockup-toolbar span { font-size: 0.625rem; color: #9ca3af; background: #f3f4f6; padding: 0.1875rem 0.5rem; border-radius: 0.25rem; flex: 1; text-align: center; }
.hero-mockup-dots { display: flex; gap: 0.25rem; }
.hero-mockup-dots span { width: 10px; height: 10px; border-radius: 50%; }
.hero-mockup-dots span:nth-child(1) { background: radial-gradient(circle at 35% 35%, #ff7b7b, #ef4444 50%, #b91c1c); }
.hero-mockup-dots span:nth-child(2) { background: radial-gradient(circle at 35% 35%, #fde68a, #fbbf24 50%, #b45309); }
.hero-mockup-dots span:nth-child(3) { background: radial-gradient(circle at 35% 35%, #6ee7b7, #22c55e 50%, #15803d); }
.hero-mockup-body { padding: 1.25rem; }
.hero-mockup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 0.875rem; }
.hero-mini-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.625rem; padding: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.hmc-icon { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; flex-shrink: 0; }
.hmc-icon.green { background: #ecfdf5; color: #22c55e; }
.hmc-icon.blue { background: #eff6ff; color: #3b82f6; }
.hmc-icon.purple { background: #f3e8ff; color: #8b5cf6; }
.hmc-icon.orange { background: #fff7ed; color: #f97316; }
.hmc-val { font-size: 0.875rem; font-weight: 800; color: #111827; display: block; }
.hmc-lbl { font-size: 0.5625rem; color: #9ca3af; display: block; }
.hero-mockup-chart { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.625rem; padding: 0.75rem; display: flex; align-items: flex-end; gap: 0.375rem; height: 10rem; }
.hmc-bar { flex: 1; border-radius: 0.25rem 0.25rem 0 0; background: linear-gradient(to top, #6366f1, #a78bfa); animation: hmcBarGrow 1.2s ease forwards; transform-origin: bottom; }
@keyframes hmcBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hmc-bar:nth-child(1) { animation-delay: 0.1s; }
.hmc-bar:nth-child(2) { animation-delay: 0.2s; }
.hmc-bar:nth-child(3) { animation-delay: 0.3s; }
.hmc-bar:nth-child(4) { animation-delay: 0.4s; }
.hmc-bar:nth-child(5) { animation-delay: 0.5s; }
.hmc-bar:nth-child(6) { animation-delay: 0.6s; }
.hmc-bar:nth-child(7) { animation-delay: 0.7s; }

/* Floating cards around mockup */
.hero-card { position: absolute; background: white; backdrop-filter: blur(16px); border: 1px solid #e5e7eb; border-radius: 1rem; padding: 0.875rem 1.125rem; display: flex; align-items: center; gap: 0.75rem; animation: float-card 6s ease-in-out infinite; box-shadow: 0 8px 32px rgba(0,0,0,0.08); z-index: 2; }
.hero-card-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.hero-card-label { font-size: 0.6875rem; color: #6b7280; display: block; }
.hero-card-value { font-size: 1.25rem; font-weight: 800; display: block; }
.hero-card-1 { top: -12%; left: 25%; } .hero-card-1 .hero-card-icon { background: #ecfdf5; color: #22c55e; } .hero-card-1 .hero-card-value { color: #16a34a; }
.hero-card-2 { top: 25%; right: -20%; animation-delay: -2s; } .hero-card-2 .hero-card-icon { background: #eef2ff; color: #6366f1; } .hero-card-2 .hero-card-value { color: #6366f1; }
.hero-card-3 { bottom: -8%; left: -15%; animation-delay: -4s; } .hero-card-3 .hero-card-icon { background: #fdf2f8; color: #ec4899; } .hero-card-3 .hero-card-value { color: #ec4899; }
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ===== MARQUEE ===== */
.marquee-strip { padding: 1.25rem 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; overflow: hidden; }
.marquee-track { overflow: hidden; }
.marquee-content { display: flex; gap: 2rem; align-items: center; animation: scroll-marquee 30s linear infinite; width: max-content; color: #9ca3af; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.marquee-dot { color: #6366f1; font-size: 0.5rem; }
@keyframes scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===== SECTION HEADERS ===== */
.section-header { text-align: center; margin-bottom: 4rem; }
.section-label { display: inline-block; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6366f1; margin-bottom: 0.75rem; background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08)); border: 1px solid rgba(99,102,241,0.15); padding: 0.375rem 1rem; border-radius: 2rem; }
.section-title { font-size: 2.25rem; font-weight: 800; color: #111827; letter-spacing: -0.02em; line-height: 1.15; }
@media (min-width: 768px) { .section-title { font-size: 3rem; } }
.sec-dashboard .section-title { font-size: 3rem; }
@media (min-width: 768px) { .sec-dashboard .section-title { font-size: 4rem; } }
.section-desc { font-size: 1rem; color: #6b7280; line-height: 1.7; max-width: 36rem; margin: 1rem auto 0; }

/* ===== SPLIT LAYOUT ===== */
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }
@media (max-width: 900px) { .split-layout, .split-reverse { grid-template-columns: 1fr; gap: 3rem; direction: ltr; } }
.section-title-left { font-size: 2.25rem; font-weight: 800; color: #111827; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1rem; }
@media (min-width: 768px) { .section-title-left { font-size: 2.75rem; } }
.section-desc-left { font-size: 1rem; color: #6b7280; line-height: 1.7; margin-bottom: 2rem; }

/* Feature list */
.feature-list { display: flex; flex-direction: column; gap: 1.5rem; }
.feature-item { display: flex; gap: 1rem; align-items: flex-start; }
.feature-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; }
.feature-icon.purple { background: #eef2ff; color: #6366f1; }
.feature-icon.blue { background: #eff6ff; color: #3b82f6; }
.feature-icon.green { background: #ecfdf5; color: #22c55e; }
.feature-icon.amber { background: #fffbeb; color: #f59e0b; }
.feature-icon.rose { background: #fff1f2; color: #f43f5e; }
.feature-item h4 { font-size: 0.9375rem; font-weight: 700; color: #111827; margin-bottom: 0.25rem; }
.feature-item p { font-size: 0.8125rem; color: #6b7280; line-height: 1.5; }

/* ===== 1. DASHBOARD ===== */
.sec-dashboard { padding: 6rem 0; position: relative; overflow: hidden; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%); }

/* Dashboard Background Effects */
.dashboard-bg { position: absolute; inset: 0; pointer-events: none; }
.dash-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; }
.dash-orb-1 { width: 400px; height: 400px; top: -10%; right: 5%; background: rgba(99,102,241,0.15); animation: dashOrbFloat 8s ease-in-out infinite; }
.dash-orb-2 { width: 300px; height: 300px; bottom: -5%; left: 0%; background: rgba(139,92,246,0.12); animation: dashOrbFloat 10s ease-in-out infinite 2s; }
.dash-orb-3 { width: 250px; height: 250px; top: 40%; left: 20%; background: rgba(236,72,153,0.1); animation: dashOrbFloat 12s ease-in-out infinite 4s; }
@keyframes dashOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.1); } 66% { transform: translate(-15px, 15px) scale(0.95); } }

.dash-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 60%); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 60%); }

/* Dashboard Header Badge */
.dash-header-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(135deg, #eef2ff, #e0e7ff); border: 1px solid #c7d2fe; border-radius: 2rem; font-size: 0.8125rem; font-weight: 600; color: #6366f1; margin-bottom: 1.25rem; animation: dashBadgePulse 2s ease-in-out infinite; }
.dash-header-badge i { font-size: 0.75rem; }
@keyframes dashBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); } 50% { box-shadow: 0 0 0 8px rgba(99,102,241,0.1); } }

/* Mobile Dashboard Image */
.dashboard-mobile-image { display: none; text-align: center; }
.dashboard-mobile-image img { max-width: 100%; height: auto; border-radius: 1.5rem; box-shadow: 0 25px 80px rgba(0,0,0,0.15); }
@media (max-width: 768px) {
    .dashboard-mobile-image { display: block; }
    .dashboard-mockup-wrap { display: none; }
}

.dashboard-mockup-wrap { perspective: 1200px; max-width: 72rem; margin: 0 auto; }
.dashboard-mockup {
    background: white; border: 1px solid #e5e7eb;
    border-radius: 1rem; overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,0.12), 0 8px 32px rgba(99,102,241,0.06), 0 0 0 1px rgba(0,0,0,0.02);
    transform: rotateX(2deg); transition: transform 0.35s ease-out, box-shadow 0.35s ease-out;
    will-change: transform;
}
.dashboard-mockup:hover { box-shadow: 0 35px 100px rgba(0,0,0,0.16), 0 12px 40px rgba(99,102,241,0.1), 0 0 0 1px rgba(0,0,0,0.03); }

.mockup-toolbar { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.mockup-dots { display: flex; gap: 0.375rem; }
.mockup-dots span { width: 10px; height: 10px; border-radius: 50%; }
.mockup-dots span:nth-child(1) { background: #ef4444; }
.mockup-dots span:nth-child(2) { background: #fbbf24; }
.mockup-dots span:nth-child(3) { background: #22c55e; }
.mockup-url { font-size: 0.75rem; color: #6b7280; background: #f3f4f6; padding: 0.25rem 0.75rem; border-radius: 0.375rem; flex: 1; text-align: center; }
.mockup-toolbar-actions { display: flex; align-items: center; gap: 0.75rem; color: #9ca3af; font-size: 0.8125rem; }
.mockup-user-avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #6366f1; color: white; font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.mockup-body { display: flex; min-height: 48rem; }

/* Sidebar */
.mockup-sidebar { width: 12.5rem; border-right: 1px solid #f3f4f6; padding: 0; flex-shrink: 0; background: #fafafa; display: flex; flex-direction: column; }
@media (max-width: 640px) { .mockup-sidebar { display: none; } .dash-tab-content { display: none !important; } .dash-tab-content#tab-overview { display: block !important; } }
.sidebar-brand { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1rem 0.75rem; font-weight: 800; font-size: 0.9375rem; color: #111827; }
.sidebar-brand-icon { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.sidebar-section-label { font-size: 0.625rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.75rem 1rem 0.375rem; }
.sidebar-divider { height: 1px; background: #e5e7eb; margin: 0.5rem 0.75rem; }
.sidebar-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; font-size: 0.8125rem; color: #6b7280; cursor: pointer; transition: all 0.2s; position: relative; }
.sidebar-item i { width: 1rem; text-align: center; flex-shrink: 0; }
.sidebar-item span { flex: 1; }
.sidebar-item:hover { color: #111827; background: rgba(0,0,0,0.03); }
.sidebar-item.active { color: #111827; background: #eef2ff; font-weight: 600; }
.sidebar-active-indicator { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 3px 0 0 3px; background: #6366f1; }
.sidebar-badge { font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 1rem; color: white; min-width: 1.25rem; text-align: center; }
.sidebar-badge.green { background: #22c55e; }
.sidebar-badge.pink { background: #ec4899; }
.sidebar-badge.blue { background: #3b82f6; }
.sidebar-badge.purple { background: #6366f1; }
.sidebar-badge.amber { background: #f59e0b; }
.sidebar-badge.teal { background: #14b8a6; }
.sidebar-item-dim { opacity: 0.5; cursor: default; }
.sidebar-item-dim:hover { color: #6b7280; background: transparent; }

/* Main */
.mockup-main { flex: 1; padding: 1.25rem; overflow-y: auto; position: relative; }

/* Tab content */
.dash-tab-content { display: none; animation: dashFadeIn 0.4s ease; min-height: 44rem; }
.dash-tab-content.active { display: block; }
@keyframes dashFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.dash-tab-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dash-tab-header h3 { font-size: 1rem; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 0.5rem; }
.dash-period-selector { display: flex; gap: 0.25rem; background: #f3f4f6; border-radius: 0.375rem; padding: 0.125rem; }
.dash-period-selector span { font-size: 0.625rem; font-weight: 600; color: #6b7280; padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s; }
.dash-period-selector .period-active { background: white; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.dash-status-pill { font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 1rem; }
.dash-status-pill.online { background: #ecfdf5; color: #16a34a; }

/* Stat cards */
.mockup-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
@media (max-width: 480px) { .mockup-stat-row { grid-template-columns: 1fr; } }
.mockup-stat-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 0.875rem; display: flex; align-items: center; gap: 0.75rem; transition: all 0.3s; position: relative; overflow: hidden; }
.mockup-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.mockup-stat-card.border-green { border-left: 3px solid #22c55e; }
.mockup-stat-card.border-pink { border-left: 3px solid #ec4899; }
.mockup-stat-card.border-blue { border-left: 3px solid #3b82f6; }
.mockup-stat-card.border-purple { border-left: 3px solid #6366f1; }
.mockup-stat-card.border-amber { border-left: 3px solid #f59e0b; }
.mockup-stat-card.border-teal { border-left: 3px solid #14b8a6; }
.mockup-stat-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; }
.mockup-stat-icon.green { background: #ecfdf5; color: #22c55e; }
.mockup-stat-icon.blue { background: #eff6ff; color: #3b82f6; }
.mockup-stat-icon.purple { background: #eef2ff; color: #6366f1; }
.mockup-stat-icon.pink { background: #fdf2f8; color: #ec4899; }
.mockup-stat-icon.amber { background: #fffbeb; color: #f59e0b; }
.mockup-stat-icon.teal { background: #f0fdfa; color: #14b8a6; }
.mockup-stat-val { font-size: 1.125rem; font-weight: 800; color: #111827; }
.mockup-stat-lbl { font-size: 0.6875rem; color: #6b7280; }
.mockup-stat-unit { font-size: 0.6875rem; color: #9ca3af; font-weight: 600; display: inline; }
.stat-trend { font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 0.25rem; margin-left: auto; white-space: nowrap; }
.stat-trend.up { color: #16a34a; background: #ecfdf5; }
.stat-trend.down { color: #dc2626; background: #fef2f2; }

/* Chart */
.mockup-chart { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.chart-label { font-size: 0.75rem; color: #6b7280; margin-bottom: 0.75rem; font-weight: 600; }
.chart-bars { display: flex; gap: 0.5rem; align-items: flex-end; height: 7rem; }
.chart-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; height: 100%; justify-content: flex-end; }
.chart-bar-group span { font-size: 0.625rem; color: #9ca3af; }
.chart-bar { width: 100%; border-radius: 0.25rem 0.25rem 0 0; overflow: hidden; transition: height 0.8s cubic-bezier(0.16,1,0.3,1); }
.chart-bar-fill { width: 100%; height: 100%; border-radius: 0.25rem 0.25rem 0 0; }
.chart-bar-fill.whatsapp { background: linear-gradient(to top, #22c55e, #4ade80); }
.chart-bar-fill.instagram { background: linear-gradient(to top, #e11d48, #f472b6); }
.chart-bar-fill.messenger { background: linear-gradient(to top, #2563eb, #60a5fa); }
.chart-bar-fill.email { background: linear-gradient(to top, #6366f1, #a78bfa); }
.chart-bar-fill.sms { background: linear-gradient(to top, #d97706, #fbbf24); }

/* Live feed */
.dash-live-feed { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.live-feed-items { display: flex; flex-direction: column; gap: 0.5rem; }
.live-feed-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #374151; padding: 0.375rem 0.5rem; border-radius: 0.5rem; transition: background 0.2s; animation: liveFadeIn 0.5s ease; }
.live-feed-item:hover { background: rgba(0,0,0,0.02); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; animation: livePulse 2s infinite; }
.live-dot.green { background: #22c55e; }
.live-dot.pink { background: #ec4899; }
.live-dot.purple { background: #6366f1; }
.live-dot.amber { background: #f59e0b; }
.live-channel { color: #9ca3af; font-size: 0.8125rem; }
.live-time { color: #9ca3af; margin-left: auto; font-size: 0.625rem; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes liveFadeIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

/* Conversations list */
.dash-conversations, .dash-messenger-threads { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.dash-convo-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-convo-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border-radius: 0.5rem; transition: background 0.2s; cursor: default; }
.dash-convo-item:hover { background: rgba(0,0,0,0.02); }
.convo-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; color: white; flex-shrink: 0; }
.convo-avatar.green { background: #22c55e; }
.convo-avatar.blue { background: #3b82f6; }
.convo-info { flex: 1; min-width: 0; }
.convo-info strong { font-size: 0.75rem; color: #111827; display: block; }
.convo-info p { font-size: 0.6875rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.convo-time { font-size: 0.625rem; color: #9ca3af; flex-shrink: 0; }
.convo-unread { background: #22c55e; color: white; font-size: 0.5625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 1rem; }
.convo-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.convo-status-dot.pulse { animation: livePulse 1.5s infinite; }

/* Templates */
.dash-templates { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.template-bars { display: flex; flex-direction: column; gap: 0.625rem; }
.template-bar-row { display: flex; align-items: center; gap: 0.5rem; }
.tpl-name { font-size: 0.6875rem; color: #374151; width: 8rem; flex-shrink: 0; }
.tpl-bar { flex: 1; height: 0.375rem; background: #e5e7eb; border-radius: 0.25rem; overflow: hidden; }
.tpl-bar-fill { height: 100%; border-radius: 0.25rem; transition: width 1s ease; }
.green-bg { background: linear-gradient(90deg, #22c55e, #4ade80); }
.purple-bg { background: linear-gradient(90deg, #6366f1, #a78bfa); }
.tpl-pct { font-size: 0.6875rem; font-weight: 700; color: #111827; width: 2rem; text-align: right; }

/* Instagram content */
.dash-ig-grid { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.ig-content-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.ig-card { border-radius: 0.5rem; overflow: hidden; border: 1px solid #e5e7eb; transition: transform 0.3s; }
.ig-card:hover { transform: scale(1.03); }
.ig-card-visual { height: 4.5rem; }
.grad-pink { background: linear-gradient(135deg, #ec4899, #f472b6, #fbbf24); }
.grad-orange { background: linear-gradient(135deg, #f97316, #fb923c, #fbbf24); }
.grad-purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa, #ec4899); }
.ig-card-stats { display: flex; justify-content: center; gap: 0.625rem; padding: 0.375rem; background: white; font-size: 0.5625rem; color: #6b7280; }
.ig-card-stats i { color: #ec4899; margin-right: 0.125rem; }

/* Instagram growth */
.dash-ig-growth { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.ig-growth-visual { position: relative; }
.ig-sparkline { width: 100%; height: 3.5rem; }
.sparkline-path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawLine 2s ease forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.ig-growth-label { font-size: 0.75rem; font-weight: 700; color: #E4405F; margin-top: 0.375rem; }

/* Messenger flow */
.dash-messenger-flow { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.flow-stages { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.flow-stage { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.flow-circle { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 800; color: white; }
.blue-bg { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.flow-stage span { font-size: 0.625rem; color: #6b7280; font-weight: 600; }
.flow-arrow { color: #d1d5db; font-size: 0.625rem; }

/* Email campaigns */
.dash-email-campaigns { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.email-campaign-list { display: flex; flex-direction: column; gap: 0.5rem; }
.email-campaign-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border-radius: 0.5rem; }
.email-campaign-row:hover { background: rgba(0,0,0,0.02); }
.campaign-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.campaign-status.sent { background: #22c55e; }
.campaign-status.scheduled { background: #f59e0b; }
.campaign-info { flex: 1; }
.campaign-info strong { font-size: 0.75rem; color: #111827; display: block; }
.campaign-info span { font-size: 0.625rem; color: #9ca3af; }
.campaign-metrics { display: flex; gap: 0.5rem; }
.cm-open, .cm-click { font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 0.25rem; }
.cm-open { color: #6366f1; background: #eef2ff; }
.cm-click { color: #3b82f6; background: #eff6ff; }
.cm-pending { font-size: 0.625rem; color: #f59e0b; font-weight: 600; }

/* Email mini chart */
.dash-email-growth { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.email-mini-chart { display: flex; flex-direction: column; gap: 0.375rem; }
.mini-bar-row { display: flex; align-items: center; gap: 0.5rem; }
.mini-bar-row span { font-size: 0.625rem; color: #9ca3af; width: 1.75rem; }
.mini-bar { flex: 1; height: 0.5rem; background: #e5e7eb; border-radius: 0.25rem; overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 0.25rem; transition: width 1s ease; }

/* SMS donut */
.dash-sms-optins { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.sms-donut-wrap { position: relative; width: 7rem; height: 7rem; flex-shrink: 0; }
.sms-donut { width: 100%; height: 100%; }
.sms-donut-fill { transition: stroke-dashoffset 1.5s ease; }
.sms-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.sms-donut-val { font-size: 1.125rem; font-weight: 900; color: #111827; display: block; }
.sms-donut-lbl { font-size: 0.625rem; color: #9ca3af; }
.sms-opt-stats { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; }
.sms-opt-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #374151; }
.sms-opt-row strong { margin-left: auto; font-weight: 700; }
.opt-dot { width: 8px; height: 8px; border-radius: 50%; }
.opt-dot.amber { background: #f59e0b; }
.opt-dot.gray { background: #d1d5db; }
.opt-dot.green { background: #22c55e; }

/* SMS campaigns */
.dash-sms-recent { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.sms-campaign-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.sms-camp-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 0.5rem; }
.sms-camp-card:hover { background: rgba(0,0,0,0.02); }
.sms-camp-icon { width: 2rem; height: 2rem; border-radius: 0.5rem; background: #fffbeb; color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.sms-camp-card strong { font-size: 0.75rem; color: #111827; display: block; }
.sms-camp-card p { font-size: 0.625rem; color: #9ca3af; margin: 0; }

/* Calls split bar */
.dash-calls-breakdown { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.calls-split-bar { display: flex; height: 2rem; border-radius: 0.5rem; overflow: hidden; }
.split-segment { display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; color: white; transition: width 1s ease; }
.ai-segment { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.human-segment { background: linear-gradient(90deg, #6366f1, #818cf8); }

/* Active calls */
.dash-calls-active { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.active-calls-list { display: flex; flex-direction: column; gap: 0.5rem; }
.active-call-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border-radius: 0.5rem; }
.active-call-item:hover { background: rgba(0,0,0,0.02); }
.call-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; animation: livePulse 1.5s infinite; flex-shrink: 0; }
.call-live-dot.human { background: #6366f1; }
.call-live-info { flex: 1; }
.call-live-info strong { font-size: 0.75rem; color: #111827; display: block; }
.call-live-info span { font-size: 0.625rem; color: #9ca3af; }
.call-live-wave { display: flex; gap: 2px; align-items: center; height: 1.25rem; }
.call-live-wave span { width: 3px; border-radius: 2px; background: #14b8a6; animation: waveAnim 0.6s ease-in-out infinite alternate; }
.call-live-wave span:nth-child(1) { height: 30%; animation-delay: 0s; }
.call-live-wave span:nth-child(2) { height: 60%; animation-delay: 0.1s; }
.call-live-wave span:nth-child(3) { height: 90%; animation-delay: 0.2s; }
.call-live-wave span:nth-child(4) { height: 50%; animation-delay: 0.3s; }
.call-live-wave span:nth-child(5) { height: 70%; animation-delay: 0.4s; }
@keyframes waveAnim { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } }

/* Line Chart */
.dash-line-chart-wrap { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.dash-line-chart { display: flex; gap: 0.25rem; }
.line-chart-y-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.5625rem; color: #9ca3af; width: 2rem; text-align: right; padding: 0.25rem 0; }
.line-chart-area { flex: 1; }
.overview-line-svg { width: 100%; height: 7rem; display: block; }
.line-chart-x-axis { display: flex; justify-content: space-between; font-size: 0.5625rem; color: #9ca3af; padding-top: 0.375rem; }
.line-chart-legend { display: flex; gap: 1rem; margin-top: 0.625rem; }
.legend-item { font-size: 0.6875rem; color: #6b7280; display: flex; align-items: center; gap: 0.375rem; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.anim-line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawLine 2s ease forwards; }
.anim-area { opacity: 0; animation: fadeAreaIn 1s ease 1s forwards; }
.anim-dot { opacity: 0; animation: dotAppear 0.3s ease forwards; }
.anim-dot:nth-child(7) { animation-delay: 0.3s; }
.anim-dot:nth-child(8) { animation-delay: 0.5s; }
.anim-dot:nth-child(9) { animation-delay: 0.7s; }
.anim-dot:nth-child(10) { animation-delay: 0.9s; }
.anim-dot:nth-child(11) { animation-delay: 1.1s; }
.anim-dot:nth-child(12) { animation-delay: 1.3s; }
.anim-dot:nth-child(13) { animation-delay: 1.5s; }
@keyframes fadeAreaIn { to { opacity: 1; } }
@keyframes dotAppear { to { opacity: 1; } }

/* Overview analytics row */
.overview-analytics-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .overview-analytics-row { flex-direction: column; } }
.overview-analytics-row .mockup-chart { margin-bottom: 0; }
.overview-donut-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; display: flex; flex-direction: column; align-items: center; min-width: 10rem; }
.overview-donut { width: 6rem; height: 6rem; margin-bottom: 0.5rem; }
.donut-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; justify-content: center; }
.donut-legend span { font-size: 0.5625rem; color: #6b7280; display: flex; align-items: center; gap: 0.25rem; }

/* Color variants */
.convo-avatar.pink { background: #ec4899; }
.convo-unread.pink-unread { background: #ec4899; }
.convo-unread.blue-unread { background: #3b82f6; }
.pink-bg { background: linear-gradient(90deg, #ec4899, #f472b6); }
.blue-bar-bg { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.gray-bg { background: #d1d5db; }
.purple-light-bg { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
.purple-dark-bg { background: linear-gradient(90deg, #4f46e5, #6366f1); }

/* Email personalization — split bar */
.dash-email-personalization { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.email-pers-split { }
.pers-split-bar { display: flex; height: 2.25rem; border-radius: 0.5rem; overflow: hidden; margin-bottom: 0.625rem; }
.pers-split-seg { display: flex; align-items: center; justify-content: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 700; color: white; transition: width 1s ease; }
.pers-split-seg.personalized { background: linear-gradient(90deg, #6366f1, #818cf8); }
.pers-split-seg.generic { background: #d1d5db; }
.pers-split-details { display: flex; gap: 1.25rem; }
.pers-detail-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: #6b7280; }
.pers-detail-dot { width: 8px; height: 8px; border-radius: 50%; }
.purple-dot { background: #6366f1; }
.gray-dot { background: #d1d5db; }
.email-stat-row-4 { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 640px) { .email-stat-row-4 { grid-template-columns: repeat(2, 1fr) !important; } }

/* Email impact cards */
.dash-email-impact { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.email-impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.625rem; }
@media (max-width: 640px) { .email-impact-grid { grid-template-columns: repeat(2, 1fr); } }
.impact-card { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 0.875rem 0.5rem; text-align: center; transition: all 0.3s; position: relative; }
.impact-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.impact-card-best { border-color: #c7d2fe; background: linear-gradient(180deg, #faf5ff 0%, white 100%); }
.impact-card-best:hover { border-color: #6366f1; }
.impact-level-badge { font-size: 0.5625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.1875rem 0.5rem; border-radius: 1rem; display: inline-block; margin-bottom: 0.5rem; }
.generic-badge { background: #f3f4f6; color: #9ca3af; }
.name-badge { background: #ede9fe; color: #7c3aed; }
.behavior-badge { background: #eef2ff; color: #6366f1; }
.ai-badge { background: linear-gradient(135deg, #eef2ff, #fdf2f8); color: #4f46e5; }
.impact-ring-wrap { position: relative; width: 4.5rem; height: 4.5rem; margin: 0 auto 0.375rem; }
.impact-ring { width: 100%; height: 100%; }
.impact-ring-fill { transition: stroke-dashoffset 1.5s cubic-bezier(0.16,1,0.3,1); }
.impact-ring-val { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.9375rem; font-weight: 900; color: #111827; }
.impact-desc { font-size: 0.5625rem; color: #9ca3af; line-height: 1.3; }
.impact-best-tag { position: absolute; top: 0.375rem; right: 0.375rem; font-size: 0.5rem; font-weight: 800; color: #f59e0b; display: flex; align-items: center; gap: 0.1875rem; }

.mini-val { font-size: 0.625rem; font-weight: 700; color: #111827; width: 2rem; text-align: right; }

/* Call outcomes */
.dash-calls-results { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.call-outcomes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
@media (max-width: 480px) { .call-outcomes-grid { grid-template-columns: repeat(2, 1fr); } }
.call-outcome-card { text-align: center; padding: 0.75rem 0.5rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.625rem; transition: transform 0.3s; }
.call-outcome-card:hover { transform: translateY(-2px); }
.outcome-icon { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; margin: 0 auto 0.375rem; color: white; }
.outcome-icon.teal-bg { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.outcome-icon.green-bg-icon { background: linear-gradient(135deg, #22c55e, #4ade80); }
.outcome-icon.amber-bg { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.outcome-icon.purple-bg-icon { background: linear-gradient(135deg, #6366f1, #818cf8); }
.outcome-val { font-size: 1.125rem; font-weight: 900; color: #111827; }
.outcome-lbl { font-size: 0.5625rem; color: #6b7280; }

/* Response time cards */
.dash-wa-chart, .dash-ig-chart, .dash-msg-chart, .dash-sms-chart, .dash-calls-chart { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.dash-wa-response { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.response-time-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.rt-card { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.625rem; transition: transform 0.3s; }
.rt-card:hover { transform: translateY(-2px); }
.rt-icon { width: 2rem; height: 2rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; }
.rt-icon.green { background: #ecfdf5; color: #22c55e; }
.rt-icon.blue { background: #eff6ff; color: #3b82f6; }
.rt-icon.purple { background: #eef2ff; color: #6366f1; }
.rt-icon.pink { background: #fdf2f8; color: #ec4899; }
.rt-icon.amber { background: #fffbeb; color: #f59e0b; }
.rt-icon.teal { background: #f0fdfa; color: #14b8a6; }
.rt-val { font-size: 1rem; font-weight: 800; color: #111827; }
.rt-lbl { font-size: 0.625rem; color: #6b7280; }

/* Teal bar fill */
.chart-bar-fill.teal-bar { background: linear-gradient(to top, #14b8a6, #2dd4bf); }

/* Feature pills */
.feature-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 3rem; }
.pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 2rem; background: #f9fafb; border: 1px solid #e5e7eb; color: #374151; font-size: 0.8125rem; font-weight: 500; transition: all 0.3s; }
.pill:hover { border-color: #6366f1; color: #6366f1; background: #eef2ff; transform: translateY(-2px); }
.pill i { font-size: 0.875rem; }

/* ===== 2. AI RETENTION ===== */
.sec-ai-retention { padding: 6rem 0; background: #f9fafb; }

.ai-visual-container { position: relative; width: 100%; aspect-ratio: 1; max-width: 24rem; margin: 0 auto; }
.ai-orbit { position: relative; width: 100%; height: 100%; }
.ai-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5rem; height: 5rem; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: white; z-index: 2; box-shadow: 0 0 40px rgba(99,102,241,0.3); }
.ai-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5rem; height: 5rem; border-radius: 50%; background: rgba(99,102,241,0.15); animation: ai-pulse 2s ease-out infinite; }
@keyframes ai-pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } }

.orbit-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed #e5e7eb; }
.orbit-ring-1 { width: 14rem; height: 14rem; transform: translate(-50%, -50%); animation: spin-orbit 20s linear infinite; }
.orbit-ring-2 { width: 22rem; height: 22rem; transform: translate(-50%, -50%); animation: spin-orbit 35s linear infinite reverse; }
@keyframes spin-orbit { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.orbit-node { position: absolute; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: white; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #6366f1; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.orbit-ring-1 .node-1 { top: -1.125rem; left: 50%; transform: translateX(-50%); }
.orbit-ring-1 .node-2 { bottom: -1.125rem; left: 10%; }
.orbit-ring-1 .node-3 { bottom: -1.125rem; right: 10%; }
.orbit-ring-2 .node-4 { top: -1.125rem; left: 50%; transform: translateX(-50%); }
.orbit-ring-2 .node-5 { top: 25%; right: -1.125rem; }
.orbit-ring-2 .node-6 { bottom: -1.125rem; left: 50%; transform: translateX(-50%); }
.orbit-ring-2 .node-7 { top: 25%; left: -1.125rem; }

/* ===== 3. LOYALTY ===== */
.sec-loyalty { padding: 6rem 0; }

/* Journey layout */
.loyalty-journey { position: relative; margin-bottom: 4rem; }

/* Connecting path line */
.journey-path { position: absolute; top: 2.5rem; left: 0; right: 0; z-index: 0; padding: 0 3rem; }
.journey-line-svg { width: 100%; height: 8px; display: block; }
.journey-progress-bar { animation: journeyFill 2s ease forwards; transform-origin: left; }
@keyframes journeyFill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 768px) { .journey-path { display: none; } }

/* Steps */
.journey-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; z-index: 1; }
@media (max-width: 900px) { .journey-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (max-width: 480px) { .journey-steps { grid-template-columns: 1fr; } }

.journey-step { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Step marker — the circle on the path */
.step-marker {
    width: 5rem; height: 5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: white; position: relative;
    margin-bottom: 1.25rem; z-index: 2;
    transition: transform 0.4s, box-shadow 0.4s;
}
.journey-step:hover .step-marker { transform: scale(1.12); }
.step-ring {
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.3);
    animation: stepRingSpin 12s linear infinite;
}
@keyframes stepRingSpin { to { transform: rotate(360deg); } }

.bronze-marker { background: linear-gradient(135deg, #cd7f32, #e8a85c); box-shadow: 0 8px 25px rgba(205,127,50,0.3); }
.bronze-marker .step-ring { border-color: rgba(205,127,50,0.3); }
.silver-marker { background: linear-gradient(135deg, #9ca3af, #d1d5db); box-shadow: 0 8px 25px rgba(156,163,175,0.3); }
.silver-marker .step-ring { border-color: rgba(156,163,175,0.3); }
.gold-marker { background: linear-gradient(135deg, #ca8a04, #fbbf24); box-shadow: 0 8px 25px rgba(202,138,4,0.3); }
.gold-marker .step-ring { border-color: rgba(202,138,4,0.3); }
.platinum-marker { background: linear-gradient(135deg, #6366f1, #a78bfa); box-shadow: 0 8px 30px rgba(99,102,241,0.35); }
.platinum-marker .step-ring { border-color: rgba(99,102,241,0.3); }

.journey-step:hover .bronze-marker { box-shadow: 0 12px 35px rgba(205,127,50,0.45); }
.journey-step:hover .silver-marker { box-shadow: 0 12px 35px rgba(156,163,175,0.45); }
.journey-step:hover .gold-marker { box-shadow: 0 12px 35px rgba(202,138,4,0.45); }
.journey-step:hover .platinum-marker { box-shadow: 0 12px 35px rgba(99,102,241,0.5); }

/* Step card */
.step-card {
    background: white; border: 1px solid #e5e7eb; border-radius: 1rem;
    padding: 1.25rem; width: 100%; transition: all 0.4s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.journey-step:hover .step-card { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.07); border-color: #c7d2fe; }

.step-tier-badge {
    display: inline-block; font-size: 0.625rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0.25rem 0.75rem; border-radius: 1rem; margin-bottom: 0.625rem;
}
.step-tier-badge.bronze { background: #fef3c7; color: #92400e; }
.step-tier-badge.silver { background: #f1f5f9; color: #475569; }
.step-tier-badge.gold { background: #fef9c3; color: #854d0e; }
.step-tier-badge.platinum { background: #eef2ff; color: #4338ca; }

.step-card h4 { font-size: 1rem; font-weight: 800; color: #111827; margin-bottom: 0.375rem; }
.step-card p { font-size: 0.75rem; color: #6b7280; line-height: 1.5; margin-bottom: 0.75rem; }

.step-perks { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; text-align: left; }
.step-perks span { font-size: 0.6875rem; color: #374151; display: flex; align-items: center; gap: 0.375rem; }
.step-perks i { color: #22c55e; font-size: 0.5625rem; }

.step-points {
    font-size: 0.6875rem; font-weight: 700; color: #6366f1;
    background: #eef2ff; padding: 0.375rem 0.625rem; border-radius: 0.5rem;
    display: inline-flex; align-items: center; gap: 0.375rem;
}
.step-points i { color: #f59e0b; }

/* Bottom stats */
.loyalty-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
@media (max-width: 768px) { .loyalty-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .loyalty-stats { grid-template-columns: 1fr; } }

.loyalty-stat-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; background: white; border: 1px solid #e5e7eb;
    border-radius: 1rem; transition: all 0.3s;
}
.loyalty-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }

.loyalty-stat-visual { position: relative; width: 3.5rem; height: 3.5rem; flex-shrink: 0; }
.loyalty-ring { width: 100%; height: 100%; }
.loyalty-ring-fill { transition: stroke-dashoffset 1.5s ease; }
.loyalty-ring-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.75rem; font-weight: 900; color: #111827;
}
.loyalty-stat-card strong { font-size: 0.8125rem; color: #111827; display: block; }
.loyalty-stat-card span { font-size: 0.6875rem; color: #9ca3af; }

/* ===== 4. INTEGRATIONS ===== */
.sec-integrations { padding: 6rem 0; background: #f9fafb; }

/* Integrations 3-column layout */
.int-section-layout { display: flex; align-items: center; gap: 6.5rem; justify-content: center; }
@media (max-width: 900px) { .int-section-layout { flex-direction: column; } }

.int-side { display: flex; flex-direction: column; gap: 1.75rem; flex: 0 0 16rem; }
@media (max-width: 900px) { .int-side { flex-direction: row; flex-wrap: wrap; justify-content: center; flex: auto; } }
@media (max-width: 640px) { .int-side { display: none; } }

.int-side-card {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 1rem 1.25rem; background: white;
    border: 1px solid #e5e7eb; border-radius: 0.875rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    animation: sideCardIn 0.6s ease calc(var(--delay)) both;
}
.int-side-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #c7d2fe; }
@keyframes sideCardIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
.int-side-right .int-side-card { animation-name: sideCardInRight; }
@keyframes sideCardInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.int-side-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.int-side-icon.green { background: #ecfdf5; color: #22c55e; }
.int-side-icon.pink { background: #fdf2f8; color: #ec4899; }
.int-side-icon.blue { background: #eff6ff; color: #3b82f6; }
.int-side-icon.purple { background: #eef2ff; color: #6366f1; }
.int-side-icon.amber { background: #fffbeb; color: #f59e0b; }
.int-side-icon.teal { background: #f0fdfa; color: #14b8a6; }
.int-side-icon.sky { background: #f0f9ff; color: #0ea5e9; }
.int-side-icon.orange { background: #fff7ed; color: #f97316; }

.int-side-info { flex: 1; min-width: 0; }
.int-side-info strong { font-size: 0.875rem; color: #111827; display: block; }
.int-side-info span { font-size: 0.7rem; color: #9ca3af; }

.int-side-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.int-side-status.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); animation: statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 0%, 100% { box-shadow: 0 0 6px rgba(34,197,94,0.4); } 50% { box-shadow: 0 0 12px rgba(34,197,94,0.7); } }

.integrations-orbit-wrap { position: relative; width: 100%; max-width: 28rem; aspect-ratio: 1; flex-shrink: 0; overflow: visible; }
.integrations-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 2; }
.integrations-logo { width: 4.5rem; height: 4.5rem; }
.integrations-center span { font-size: 1.125rem; font-weight: 800; color: #111827; }

.int-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed #d1d5db; }
.int-ring-1 { width: 18rem; height: 18rem; transform: translate(-50%, -50%); animation: spin-orbit 40s linear infinite; }
.int-ring-2 { width: 30rem; height: 30rem; transform: translate(-50%, -50%); animation: spin-orbit 60s linear infinite reverse; }
@media (max-width: 640px) { .int-ring-1 { width: 12rem; height: 12rem; } .int-ring-2 { width: 20rem; height: 20rem; } }

.int-ring-1 .int-node { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-9rem); }
.int-ring-2 .int-node { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-15rem); }
@media (max-width: 640px) { .int-ring-1 .int-node { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-6rem); } .int-ring-2 .int-node { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-10rem); } }
/* Icons stay upright — JS handles counter-rotation */
.int-node { display: flex; align-items: center; justify-content: center; }

.int-icon { width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.875rem; background: white; border: 1px solid #e5e7eb; transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.int-icon.whatsapp { color: #22c55e; } .int-icon.instagram { color: #e11d48; } .int-icon.messenger { color: #3b82f6; }
.int-icon.email { color: #6366f1; } .int-icon.sms { color: #f59e0b; } .int-icon.telegram { color: #0ea5e9; }
.int-icon.salesforce { color: #0ea5e9; } .int-icon.calls { color: #14b8a6; } .int-icon.hubspot { color: #f97316; }
.int-icon.stripe { color: #6366f1; } .int-icon.zapier { color: #f97316; } .int-icon.google { color: #3b82f6; }
.int-node span { display: none; }

/* Ensure orbit elements stay above bg */
.int-ring { z-index: 1; }
.integrations-center { z-index: 3; }

.int-stat-row { display: flex; justify-content: center; gap: 3rem; margin-top: 3rem; flex-wrap: wrap; }
.int-stat { font-size: 0.875rem; color: #6b7280; }
.int-stat span { font-weight: 800; color: #111827; margin-right: 0.25rem; }

/* ===== 5. AI AGENTS ===== */
.sec-ai-agents { padding: 6rem 0; position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f8f7ff 30%, #f0eeff 50%, #f8f7ff 70%, #ffffff 100%); }

/* Animated grid */
.sec-ai-agents .ai-grid-bg { position: absolute; inset: 0; background-image: 
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
  background-size: 50px 50px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%); pointer-events: none; animation: gridShift 20s linear infinite; }
@keyframes gridShift { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }

/* Glowing nodes on the grid */
.ai-grid-nodes { position: absolute; inset: 0; pointer-events: none; }
.ai-grid-node { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,0.4), 0 0 20px rgba(99,102,241,0.15); animation: nodePulse 3s ease-in-out infinite; }
.ai-grid-node:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.ai-grid-node:nth-child(2) { top: 25%; right: 25%; animation-delay: 0.8s; background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.4), 0 0 20px rgba(139,92,246,0.15); }
.ai-grid-node:nth-child(3) { top: 55%; left: 12%; animation-delay: 1.6s; background: #ec4899; box-shadow: 0 0 8px rgba(236,72,153,0.4), 0 0 20px rgba(236,72,153,0.15); }
.ai-grid-node:nth-child(4) { top: 70%; right: 15%; animation-delay: 2.2s; }
.ai-grid-node:nth-child(5) { top: 40%; left: 45%; animation-delay: 0.4s; background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.4), 0 0 20px rgba(139,92,246,0.15); }
.ai-grid-node:nth-child(6) { top: 80%; left: 35%; animation-delay: 1.2s; background: #ec4899; box-shadow: 0 0 8px rgba(236,72,153,0.4), 0 0 20px rgba(236,72,153,0.15); }
@keyframes nodePulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.8); } }

/* Sweeping light beam */
.ai-light-sweep { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ai-light-sweep::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(99,102,241,0.03), rgba(139,92,246,0.05), rgba(99,102,241,0.03), transparent); transform: skewX(-15deg); animation: lightSweep 8s ease-in-out infinite; }
@keyframes lightSweep { 0% { left: -60%; } 100% { left: 120%; } }
.sec-ai-agents::before { content: ''; position: absolute; top: -20%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, rgba(139,92,246,0.03) 40%, transparent 70%); border-radius: 50%; pointer-events: none; animation: agentOrbFloat 12s ease-in-out infinite; }
.sec-ai-agents::after { content: ''; position: absolute; bottom: -15%; left: -8%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(236,72,153,0.05) 0%, rgba(139,92,246,0.02) 40%, transparent 70%); border-radius: 50%; pointer-events: none; animation: agentOrbFloat 10s ease-in-out infinite reverse; }
@keyframes agentOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.1); } }

/* Floating particles in AI agents section */
.ai-agents-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ai-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #6366f1; opacity: 0; animation: particleRise linear infinite; }
.ai-particle:nth-child(1) { left: 10%; animation-duration: 8s; animation-delay: 0s; }
.ai-particle:nth-child(2) { left: 25%; animation-duration: 10s; animation-delay: 1.5s; width: 4px; height: 4px; background: #8b5cf6; }
.ai-particle:nth-child(3) { left: 45%; animation-duration: 7s; animation-delay: 3s; }
.ai-particle:nth-child(4) { left: 60%; animation-duration: 9s; animation-delay: 0.5s; width: 2px; height: 2px; background: #ec4899; }
.ai-particle:nth-child(5) { left: 75%; animation-duration: 11s; animation-delay: 2s; width: 5px; height: 5px; background: #8b5cf6; }
.ai-particle:nth-child(6) { left: 88%; animation-duration: 8.5s; animation-delay: 4s; background: #ec4899; }
.ai-particle:nth-child(7) { left: 35%; animation-duration: 9.5s; animation-delay: 5.5s; width: 2px; height: 2px; }
.ai-particle:nth-child(8) { left: 55%; animation-duration: 7.5s; animation-delay: 2.5s; width: 4px; height: 4px; background: #a78bfa; }
@keyframes particleRise { 0% { bottom: -5%; opacity: 0; transform: translateX(0); } 10% { opacity: 0.4; } 50% { opacity: 0.2; } 90% { opacity: 0.05; } 100% { bottom: 105%; opacity: 0; transform: translateX(40px); } }

/* Connection lines between left and right */
.ai-agents-connector { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.connector-line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(99,102,241,0.15), transparent); animation: connectorPulse 4s ease-in-out infinite; }
.connector-line:nth-child(1) { top: 30%; left: 20%; width: 60%; }
.connector-line:nth-child(2) { top: 50%; left: 15%; width: 70%; animation-delay: 1.5s; }
.connector-line:nth-child(3) { top: 70%; left: 25%; width: 50%; animation-delay: 3s; }
@keyframes connectorPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.ai-agents-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; margin-top: 3rem; }
@media (max-width: 900px) { .ai-agents-grid { grid-template-columns: 1fr; } }

.agent-showcase-main { display: flex; justify-content: center; }
.agent-showcase-main .agent-chat-demo { max-width: 24rem; width: 100%; border-radius: 1.5rem; box-shadow: 0 0 15px rgba(99,102,241,0.2), 0 0 40px rgba(99,102,241,0.12), 0 0 80px rgba(139,92,246,0.08), 0 25px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(99,102,241,0.15); overflow: hidden; transition: box-shadow 0.4s ease; }
.agent-showcase-main .agent-chat-demo:hover { box-shadow: 0 0 20px rgba(99,102,241,0.3), 0 0 50px rgba(99,102,241,0.18), 0 0 100px rgba(139,92,246,0.12), 0 30px 70px rgba(0,0,0,0.25), 0 0 0 1px rgba(99,102,241,0.25); }

/* WhatsApp-style chat */
.wa-style { background: #111b21; }
.wa-header { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; background: #1f2c34; }
.wa-back { color: rgba(255,255,255,0.8); font-size: 0.875rem; cursor: pointer; }
.wa-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #a78bfa); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.875rem; }
.wa-header-info { flex: 1; }
.wa-header-info strong { color: white; font-size: 0.875rem; display: block; line-height: 1.2; }
.wa-header-info span { color: #8696a0; font-size: 0.6875rem; }
.wa-header-actions { display: flex; gap: 1rem; color: #aebac1; font-size: 0.875rem; }
.wa-header-actions span { cursor: pointer; transition: color 0.2s; }
.wa-header-actions span:hover { color: white; }

.wa-chat-body::-webkit-scrollbar { width: 4px; }
.wa-chat-body::-webkit-scrollbar-track { background: transparent; }
.wa-chat-body::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 4px; }
.wa-chat-body::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.5); }
.wa-chat-body { padding: 0.75rem; min-height: 28rem; max-height: 32rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.3) transparent; background: #0b141a; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L30 12 L25 15Z' fill='%23ffffff' opacity='0.015'/%3E%3Ccircle cx='10' cy='40' r='2' fill='%23ffffff' opacity='0.015'/%3E%3Ccircle cx='50' cy='45' r='1.5' fill='%23ffffff' opacity='0.015'/%3E%3C/svg%3E"); display: flex; flex-direction: column; gap: 0.25rem; }

.wa-date-chip { text-align: center; margin: 0.5rem 0; }
.wa-date-chip span { background: #182229; color: #8696a0; font-size: 0.6875rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-weight: 500; }

.wa-msg { max-width: 85%; padding: 0.5rem 0.5rem 0.25rem; border-radius: 0.5rem; font-size: 0.8125rem; line-height: 1.45; position: relative; margin-bottom: 0.125rem; }
.wa-msg p { margin: 0 0 0.125rem; }
.wa-incoming { background: #1f2c34; color: #e9edef; align-self: flex-start; border-top-left-radius: 0; }
.wa-outgoing { background: #005c4b; color: #e9edef; align-self: flex-end; border-top-right-radius: 0; }
.wa-time { font-size: 0.5625rem; color: rgba(255,255,255,0.45); float: right; margin-top: 0.25rem; margin-left: 0.5rem; }
.wa-read { color: #53bdeb; font-size: 0.5rem; margin-left: 0.125rem; }
.wa-msg-tail { display: none; }

.wa-comparison-card { background: #111b21; border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 0.625rem; margin-bottom: 0.25rem; }
.wa-comp-header { font-size: 0.6875rem; font-weight: 700; color: #8696a0; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.375rem; }
.wa-comp-header i { color: #6366f1; }
.wa-comp-row { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.75rem; color: #8696a0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.wa-comp-row:last-child { border-bottom: none; }
.wa-comp-row strong { color: #e9edef; }
.wa-comp-highlight { background: rgba(99,102,241,0.1); border-radius: 0.25rem; padding: 0.3rem 0.375rem !important; }
.wa-comp-savings strong { color: #25d366; }

.wa-typing { align-self: flex-start; padding: 0.625rem 0.75rem; background: #1f2c34; border-radius: 0.5rem; border-top-left-radius: 0; }

.wa-input-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; background: #1f2c34; border: none; }
.wa-input-icon { color: #8696a0; font-size: 1.125rem; cursor: pointer; transition: color 0.2s; flex-shrink: 0; }
.wa-input-icon:hover { color: #aebac1; }
.wa-input-field { flex: 1; background: #2a3942; border: none; outline: none; border-radius: 1.5rem; padding: 0.5rem 1rem; color: #8696a0; font-size: 0.8125rem; }
.wa-send-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #00a884; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; cursor: pointer; transition: background 0.2s; }
.wa-send-btn:hover { background: #06cf9c; }

.agent-header-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.agent-header-btn { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.2s; }
.agent-header-btn:hover { background: rgba(255,255,255,0.2); color: white; }

.agent-showcase-side { display: flex; flex-direction: column; gap: 1.25rem; }

.agent-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.agent-stat-card { background: linear-gradient(145deg, #ffffff, #f8f9ff); border: 1px solid #e5e7eb; border-radius: 1.25rem; padding: 1.25rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; transition: all 0.3s; position: relative; overflow: hidden; box-shadow: 0 0 8px rgba(99,102,241,0.06), 0 4px 16px rgba(0,0,0,0.04); }
.agent-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6); opacity: 0; transition: opacity 0.3s; }
.agent-stat-card:hover { border-color: #c7d2fe; box-shadow: 0 0 10px rgba(99,102,241,0.15), 0 0 30px rgba(99,102,241,0.08), 0 12px 32px rgba(99,102,241,0.1); transform: translateY(-4px); }
.agent-stat-card:hover::before { opacity: 1; }
.agent-stat-icon { width: 3rem; height: 3rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.agent-stat-val { font-size: 1.75rem; font-weight: 900; color: #111827; display: block; letter-spacing: -0.02em; }
.agent-stat-lbl { font-size: 0.6875rem; color: #9ca3af; font-weight: 500; }

.agent-cap-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 640px) { .agent-cap-cards { grid-template-columns: 1fr; } }
.agent-cap-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; background: white; border: 1px solid #e5e7eb; border-radius: 1.25rem; transition: all 0.3s; position: relative; overflow: hidden; box-shadow: 0 0 8px rgba(99,102,241,0.06), 0 4px 16px rgba(0,0,0,0.04); }
.agent-cap-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: linear-gradient(to top, rgba(99,102,241,0.03), transparent); transition: height 0.3s; }
.agent-cap-card:hover { border-color: #c7d2fe; box-shadow: 0 0 12px rgba(99,102,241,0.12), 0 0 30px rgba(139,92,246,0.06), 0 8px 24px rgba(99,102,241,0.1); transform: translateY(-3px); }
.agent-cap-card:hover::after { height: 100%; }
.agent-cap-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(99,102,241,0.25); }
.agent-cap-card strong { font-size: 0.9375rem; color: #111827; display: block; }
.agent-cap-card p { font-size: 0.8125rem; color: #6b7280; line-height: 1.55; margin: 0; }

.agent-channels-strip { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #111827, #1e293b); border: none; border-radius: 1.25rem; box-shadow: 0 0 15px rgba(99,102,241,0.1), 0 0 40px rgba(99,102,241,0.06), 0 12px 32px rgba(0,0,0,0.15); }
.agent-channel-label { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.agent-channel-icons { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.agent-ch-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: rgba(255,255,255,0.6); transition: all 0.3s; }
.agent-ch-icon:hover { color: white; background: rgba(99,102,241,0.3); border-color: rgba(99,102,241,0.5); transform: translateY(-3px); box-shadow: 0 4px 12px rgba(99,102,241,0.2); }

.agent-chat-demo { background: #111b21; border: none; border-radius: 1.25rem; overflow: hidden; max-width: 22rem; margin: 0 auto; }
.agent-chat-header { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; background: linear-gradient(135deg, #111827, #1e293b); color: white; }
.agent-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #a78bfa); display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; box-shadow: 0 0 0 3px rgba(99,102,241,0.25), 0 4px 12px rgba(99,102,241,0.2); position: relative; }
.agent-avatar::after { content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: #22c55e; border-radius: 50%; border: 2px solid #1e293b; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.agent-chat-header strong { color: white; font-size: 0.9375rem; display: block; letter-spacing: -0.01em; }
.agent-status { color: #86efac; font-size: 0.6875rem; font-weight: 500; display: block; margin-top: 0.125rem; }

.agent-chat-messages { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; max-height: 24rem; overflow-y: auto; }
.agent-msg { max-width: 90%; padding: 0.75rem 1rem; border-radius: 1rem; font-size: 0.8125rem; line-height: 1.5; }
.agent-msg .msg-time { font-size: 0.625rem; color: #9ca3af; display: block; margin-top: 0.375rem; }
.agent-msg.bot { background: #f3f4f6; color: #1f2937; border-radius: 1rem 1rem 1rem 0.25rem; align-self: flex-start; }
.agent-msg.user { background: #111827; color: white; border-radius: 1rem 1rem 0.25rem 1rem; align-self: flex-end; }
.agent-msg.user .msg-time { color: rgba(255,255,255,0.5); }

.agent-card-mini { background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.625rem; margin-top: 0.375rem; }
.acm-row { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.75rem; color: #6b7280; }
.acm-row strong { color: #111827; }
.acm-row.highlight { background: #eef2ff; border-radius: 0.25rem; padding: 0.25rem 0.5rem; }
.acm-row.savings strong.green { color: #16a34a; }

.agent-typing { align-self: flex-start; padding: 0.75rem 1rem; background: #f3f4f6; border-radius: 1rem 1rem 1rem 0.25rem; }
.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dots span { width: 5px; height: 5px; background-color: #6366f1; border-radius: 50%; animation: blink 1.4s infinite both; }
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }

.capability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; }
.cap-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem; border-radius: 0.75rem; background: #f9fafb; border: 1px solid #e5e7eb; font-size: 0.8125rem; color: #374151; transition: all 0.3s; }
.cap-item:hover { border-color: #c7d2fe; background: #eef2ff; }
.cap-item i { color: #6366f1; font-size: 0.875rem; }

/* ===== 6. LEADS ===== */
.sec-leads { padding: 6rem 0; background: #f9fafb; }

.leads-funnel { max-width: 40rem; margin: 0 auto; }
.funnel-stage { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; border-radius: 1rem; background: white; border: 1px solid #e5e7eb; transition: all 0.3s; }
.funnel-stage:hover { border-color: #c7d2fe; transform: translateX(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.funnel-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.stage-1 .funnel-icon { background: #eef2ff; color: #6366f1; }
.stage-2 .funnel-icon { background: #eff6ff; color: #3b82f6; }
.stage-3 .funnel-icon { background: #fdf2f8; color: #ec4899; }
.stage-4 .funnel-icon { background: #ecfdf5; color: #22c55e; }
.funnel-info { flex: 1; }
.funnel-info h4 { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 0.25rem; }
.funnel-info p { font-size: 0.8125rem; color: #6b7280; line-height: 1.5; }
.funnel-count { font-size: 1.5rem; font-weight: 900; color: #111827; white-space: nowrap; }
.funnel-arrow { text-align: center; padding: 0.5rem; color: #d1d5db; font-size: 0.875rem; }

/* ===== 7. APPOINTMENTS ===== */
.sec-appointments { padding: 6rem 0; }

.calendar-mockup { background: white; border: 1px solid #e5e7eb; border-radius: 1.25rem; padding: 1.5rem; max-width: 22rem; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,0.06); }
.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cal-header span { font-weight: 700; color: #111827; }
.cal-nav { display: flex; gap: 0.75rem; color: #9ca3af; }
.cal-nav i { cursor: pointer; transition: color 0.2s; }
.cal-nav i:hover { color: #111827; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-bottom: 1.25rem; }
.cal-day-label { font-size: 0.625rem; font-weight: 700; color: #9ca3af; text-align: center; padding: 0.25rem; text-transform: uppercase; }
.cal-day { font-size: 0.75rem; color: #374151; text-align: center; padding: 0.5rem 0.25rem; border-radius: 0.375rem; cursor: default; }
.cal-day.dim { color: #d1d5db; }
.cal-day.today { background: #111827; color: white; font-weight: 700; border-radius: 50%; }
.cal-day.has-event { position: relative; }
.cal-day.has-event::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #6366f1; }

.cal-events { display: flex; flex-direction: column; gap: 0.5rem; }
.cal-event { padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; color: #374151; display: flex; align-items: center; gap: 0.5rem; }
.cal-event.purple { background: #eef2ff; border-left: 3px solid #6366f1; }
.cal-event.blue { background: #eff6ff; border-left: 3px solid #3b82f6; }
.cal-event.green { background: #ecfdf5; border-left: 3px solid #22c55e; }
.cal-time { color: #6b7280; font-weight: 600; }

/* ===== 8. OCCASIONS ===== */
.sec-occasions { padding: 7rem 0; position: relative; overflow: hidden; background: #fff; }

.occ-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }
.occ-bg::before { content: ''; position: absolute; inset: 0; }

.occ-particles { position: absolute; inset: 0; pointer-events: none; }
.occ-particle { position: absolute; border-radius: 50%; background: rgba(99,102,241,0.1); }
.occ-particle:nth-child(1) { width: 4px; height: 4px; top: 15%; left: 10%; animation: occFloat 8s ease-in-out infinite; }
.occ-particle:nth-child(2) { width: 6px; height: 6px; top: 30%; left: 85%; animation: occFloat 12s ease-in-out infinite 2s; }
.occ-particle:nth-child(3) { width: 3px; height: 3px; top: 70%; left: 20%; animation: occFloat 10s ease-in-out infinite 4s; }
.occ-particle:nth-child(4) { width: 5px; height: 5px; top: 85%; left: 75%; animation: occFloat 9s ease-in-out infinite 3s; }
.occ-particle:nth-child(5) { width: 4px; height: 4px; top: 50%; left: 45%; animation: occFloat 11s ease-in-out infinite 1s; }
@keyframes occFloat { 0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; } 50% { transform: translateY(-20px) translateX(10px); opacity: 0.8; } }

.occ-visual-grid { display: grid; grid-template-columns: 1fr 400px; gap: 4rem; margin-top: 4rem; align-items: start; }
@media (max-width: 1100px) { .occ-visual-grid { grid-template-columns: 1fr; gap: 3rem; align-items: center; } }

/* Timeline Section */
.occ-timeline-section { position: relative; }
.occ-timeline { display: flex; flex-direction: column; gap: 1rem; }
.occ-timeline-item { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: white; border: 1px solid #e5e7eb; border-radius: 1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.occ-timeline-item:hover { background: white; border-color: #c7d2fe; transform: translateX(8px); box-shadow: 0 4px 16px rgba(99,102,241,0.1); }
.occ-timeline-item.active { background: #eef2ff; border-color: #6366f1; }

.occ-tl-marker { width: 3.25rem; height: 3.25rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: rgba(99,102,241,0.1); color: #6366f1; flex-shrink: 0; transition: all 0.3s; }
.occ-timeline-item.active .occ-tl-marker { background: #6366f1; color: white; box-shadow: 0 4px 15px rgba(99,102,241,0.3); }

.occ-tl-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.occ-tl-content h4 { font-size: 0.9375rem; font-weight: 700; color: #1f2937; margin-bottom: 0.25rem; }
.occ-tl-content p { font-size: 0.75rem; color: #6b7280; line-height: 1.5; }

/* Showcase Section */
.occ-showcase-section { display: flex; flex-direction: column; gap: 1.75rem; }

.occ-inbox-mockup { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,0.4); }

/* Email Preview */
.occ-email-preview { padding: 2.5rem; display: flex; flex-direction: column; min-height: 450px; }
.occ-preview-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.occ-preview-title-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.occ-preview-title-row i { font-size: 2rem; color: #6366f1; transition: all 0.4s; }
.occ-preview-header h3 { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.occ-preview-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.occ-preview-meta span { font-size: 0.875rem; color: rgba(255,255,255,0.5); }
.occ-ai-badge { background: #6366f1; color: #fff; padding: 0.375rem 0.625rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; }

.occ-preview-body { flex: 1; padding: 1.5rem 0; background: rgba(255,255,255,0.02); border-radius: 0.75rem; padding: 1.25rem 1.5rem; }
.occ-preview-body p { font-size: 1rem; color: rgba(255,255,255,0.85); line-height: 1.8; margin: 0; }
.occ-preview-body strong { color: #a5b4fc; background: rgba(99,102,241,0.15); padding: 0.125rem 0.5rem; border-radius: 0.375rem; }

.occ-preview-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); }
.occ-btn-primary, .occ-btn-secondary { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.25rem; border-radius: 0.625rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.occ-btn-primary { background: #6366f1; color: white; border: 1px solid #6366f1; }
.occ-btn-primary:hover { background: #5558e3; box-shadow: 0 4px 12px rgba(99,102,241,0.3); transform: translateY(-2px); }
.occ-btn-secondary { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.15); }
.occ-btn-secondary:hover { background: rgba(255,255,255,0.05); color: #fff; border-color: rgba(255,255,255,0.25); }

@media (max-width: 640px) {
    .occ-email-preview { padding: 1.5rem; min-height: auto; }
    .occ-preview-title-row i { font-size: 1.5rem; }
    .occ-preview-header h3 { font-size: 1.25rem; }
    .occ-preview-actions { flex-wrap: wrap; }
}

/* ===== 9. EMAIL ===== */
.sec-email { padding: 6rem 0; position: relative; overflow: hidden; background: #f1f5f9; }
.em-bg-pattern { position: absolute; inset: 0; pointer-events: none; }
.em-bg-pattern::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 34L0 84V50l28-16 28 16v34L28 100z' fill='none' stroke='%236366f1' stroke-width='0.5' opacity='0.12'/%3E%3C/svg%3E"); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 10%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 10%, transparent 65%); }
.em-dark-strip { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 70%; background: linear-gradient(180deg, transparent, rgba(15,23,42,0.04) 20%, rgba(15,23,42,0.06) 50%, rgba(15,23,42,0.04) 80%, transparent); pointer-events: none; }
.sec-email::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, rgba(99,102,241,0.2), transparent); pointer-events: none; }
.sec-email::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, transparent 85%, rgba(255,255,255,0.5) 100%); pointer-events: none; }

/* Floating gradient smudges */
.em-streaks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.em-streak { position: absolute; border-radius: 50%; filter: blur(60px); }
.em-streak:nth-child(1) { width: 300px; height: 300px; top: 5%; left: -5%; background: rgba(99,102,241,0.06); animation: emSmudge 12s ease-in-out infinite; }
.em-streak:nth-child(2) { width: 250px; height: 250px; bottom: 10%; right: -3%; background: rgba(139,92,246,0.05); animation: emSmudge 10s ease-in-out infinite 3s; }
.em-streak:nth-child(3) { width: 200px; height: 200px; top: 40%; left: 30%; background: rgba(236,72,153,0.04); animation: emSmudge 14s ease-in-out infinite 6s; }
.em-streak:nth-child(4) { width: 180px; height: 180px; top: 20%; right: 20%; background: rgba(99,102,241,0.05); animation: emSmudge 11s ease-in-out infinite 2s; }
.em-streak:nth-child(5) { width: 220px; height: 220px; bottom: 5%; left: 40%; background: rgba(139,92,246,0.04); animation: emSmudge 13s ease-in-out infinite 4s; }
@keyframes emSmudge { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -15px) scale(1.1); } 66% { transform: translate(-10px, 10px) scale(0.95); } }

/* Flowing string lines */
.em-strings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.em-string { fill: none; stroke: rgba(99,102,241,0.15); stroke-width: 1.5; stroke-dasharray: 8 12; animation: emStringFlow 20s linear infinite; }
.em-string.em-s2 { stroke: rgba(139,92,246,0.12); stroke-width: 1; stroke-dasharray: 12 16; animation-duration: 25s; animation-direction: reverse; }
.em-string.em-s3 { stroke: rgba(236,72,153,0.1); stroke-width: 1; stroke-dasharray: 6 18; animation-duration: 22s; }
.em-string.em-s4 { stroke: rgba(99,102,241,0.1); stroke-width: 1.5; stroke-dasharray: 15 20; animation-duration: 28s; animation-direction: reverse; }
.em-string.em-s5 { stroke: rgba(139,92,246,0.11); stroke-width: 1; stroke-dasharray: 10 14; animation-duration: 18s; }
@keyframes emStringFlow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -200; } }

/* Random floating shapes */
.em-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.em-shape { position: absolute; opacity: 0; animation: emShapeFloat 8s ease-in-out infinite; }

.em-shape-circle { width: 40px; height: 40px; border-radius: 50%; background: rgba(99,102,241,0.08); top: 8%; left: 6%; animation-duration: 9s; }
.em-shape-ring { width: 55px; height: 55px; border-radius: 50%; border: 2px solid rgba(139,92,246,0.12); top: 20%; right: 8%; animation-duration: 11s; animation-delay: 1.5s; }
.em-shape-square { width: 30px; height: 30px; border-radius: 6px; background: rgba(236,72,153,0.07); top: 65%; left: 4%; transform: rotate(25deg); animation-duration: 10s; animation-delay: 3s; }
.em-shape-triangle { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 32px solid rgba(99,102,241,0.07); top: 40%; right: 5%; animation-duration: 8.5s; animation-delay: 2s; }
.em-shape-cross { width: 28px; height: 28px; top: 75%; right: 12%; animation-duration: 12s; animation-delay: 4s; }
.em-shape-cross::before, .em-shape-cross::after { content: ''; position: absolute; background: rgba(139,92,246,0.1); border-radius: 2px; }
.em-shape-cross::before { width: 100%; height: 4px; top: 50%; transform: translateY(-50%); }
.em-shape-cross::after { width: 4px; height: 100%; left: 50%; transform: translateX(-50%); }
.em-shape-diamond { width: 25px; height: 25px; background: rgba(99,102,241,0.08); transform: rotate(45deg); top: 15%; left: 30%; animation-duration: 7s; animation-delay: 5s; border-radius: 3px; }
.em-shape-circle-sm { width: 18px; height: 18px; border-radius: 50%; background: rgba(236,72,153,0.1); bottom: 20%; left: 15%; animation-duration: 6.5s; animation-delay: 1s; }
.em-shape-ring-sm { width: 35px; height: 35px; border-radius: 50%; border: 2px solid rgba(99,102,241,0.1); bottom: 30%; right: 3%; animation-duration: 10.5s; animation-delay: 2.5s; }
.em-shape-dots { width: 6px; height: 6px; border-radius: 50%; background: rgba(139,92,246,0.15); top: 50%; left: 8%; animation-duration: 5s; animation-delay: 0.5s; box-shadow: 14px 0 0 rgba(139,92,246,0.12), 28px 0 0 rgba(139,92,246,0.09); }
.em-shape-square-sm { width: 20px; height: 20px; border: 2px solid rgba(236,72,153,0.1); border-radius: 4px; top: 85%; left: 35%; transform: rotate(15deg); animation-duration: 9.5s; animation-delay: 3.5s; }

@keyframes emShapeFloat { 0%, 100% { opacity: 0.3; transform: translateY(0) rotate(var(--r, 0deg)); } 25% { opacity: 0.7; } 50% { opacity: 0.5; transform: translateY(-20px) rotate(var(--r, 0deg)); } 75% { opacity: 0.6; } }

/* Thin decorative lines */
.sec-email-top-line { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, rgba(99,102,241,0.2), transparent); pointer-events: none; }

.email-showcase { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; margin-top: 3rem; }
@media (max-width: 900px) { .email-showcase { grid-template-columns: 1fr; } }

/* Email mockup - client style */
.email-mockup { background: #0f172a; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 0 15px rgba(99,102,241,0.15), 0 0 40px rgba(99,102,241,0.08), 0 25px 60px rgba(0,0,0,0.2); border: 1px solid rgba(99,102,241,0.15); }
.em-toolbar { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: #1e293b; border-bottom: 1px solid rgba(255,255,255,0.06); }
.em-dots { display: flex; gap: 0.3rem; }
.em-dots span { width: 8px; height: 8px; border-radius: 50%; }
.em-dots span:nth-child(1) { background: radial-gradient(circle at 35% 35%, #ff7b7b, #ef4444 50%, #b91c1c); }
.em-dots span:nth-child(2) { background: radial-gradient(circle at 35% 35%, #fde68a, #fbbf24 50%, #b45309); }
.em-dots span:nth-child(3) { background: radial-gradient(circle at 35% 35%, #6ee7b7, #22c55e 50%, #15803d); }
.em-toolbar-tabs { display: flex; gap: 0.25rem; }
.em-tab { font-size: 0.6875rem; font-weight: 600; color: rgba(255,255,255,0.4); padding: 0.3rem 0.625rem; border-radius: 0.375rem; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; transition: all 0.2s; }
.em-tab:hover:not(.active) { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); }
.em-tab.active { background: rgba(99,102,241,0.2); color: white; border: 1px solid rgba(99,102,241,0.3); }
.em-tab-badge { background: #6366f1; color: white; font-size: 0.5625rem; padding: 0.1rem 0.35rem; border-radius: 1rem; min-width: 1rem; text-align: center; }

.em-content { display: flex; min-height: 20rem; }
.em-sidebar-list { width: 40%; border-right: 1px solid rgba(255,255,255,0.06); padding: 0.5rem; }
.em-list-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.5rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s; }
.em-list-item.active { background: rgba(99,102,241,0.2); border-left: 3px solid #6366f1; }
.em-list-item:hover:not(.active) { background: rgba(255,255,255,0.04); }
.em-list-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; }
.em-list-info { flex: 1; min-width: 0; }
.em-list-info strong { display: block; font-size: 0.6875rem; color: white; }
.em-list-info span { display: block; font-size: 0.5625rem; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-list-time { font-size: 0.5625rem; color: rgba(255,255,255,0.3); flex-shrink: 0; }

.em-preview-pane { flex: 1; padding: 1rem; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.em-preview-header { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.em-preview-subject { font-size: 0.875rem; font-weight: 800; color: white; margin-bottom: 0.25rem; }
.em-preview-meta { font-size: 0.625rem; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 0.375rem; }
.em-ai-badge { background: rgba(99,102,241,0.2); color: #a5b4fc; padding: 0.15rem 0.4rem; border-radius: 0.25rem; font-weight: 600; font-size: 0.5625rem; display: inline-flex; align-items: center; gap: 0.2rem; }

.em-preview-body { }
.em-preview-banner { height: 3.5rem; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15), rgba(236,72,153,0.1)); border-radius: 0.5rem; margin-bottom: 0.75rem; }
.em-preview-greeting { font-size: 0.75rem; font-weight: 700; color: white; margin-bottom: 0.25rem; }
.em-preview-text { font-size: 0.6875rem; color: rgba(255,255,255,0.5); line-height: 1.5; margin-bottom: 0.75rem; }

.em-product-grid { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.em-product-card { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 0.5rem; text-align: center; transition: transform 0.2s, background 0.2s; cursor: pointer; }
.em-product-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.em-prod-img { height: 2rem; background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1)); border-radius: 0.25rem; margin-bottom: 0.375rem; }
.em-prod-name { display: block; font-size: 0.5625rem; font-weight: 700; color: white; }
.em-prod-price { display: block; font-size: 0.5625rem; color: #a5b4fc; font-weight: 600; }

.em-cta-button { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; font-size: 0.6875rem; font-weight: 700; text-align: center; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s; }
.em-cta-button:hover { box-shadow: 0 4px 12px rgba(99,102,241,0.4); transform: translateY(-2px); }

/* Right side - stats & features */
.email-showcase-info { display: flex; flex-direction: column; gap: 1.5rem; }
.em-stats-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.em-stat-card { display: flex; align-items: center; gap: 1rem; background: white; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; box-shadow: 0 0 8px rgba(99,102,241,0.04), 0 4px 16px rgba(0,0,0,0.03); transition: all 0.3s; }
.em-stat-card:hover { border-color: #c7d2fe; transform: translateY(-2px); box-shadow: 0 0 12px rgba(99,102,241,0.1), 0 8px 24px rgba(0,0,0,0.06); }
.em-stat-ring { position: relative; width: 3.5rem; height: 3.5rem; flex-shrink: 0; }
.em-stat-ring svg { width: 100%; height: 100%; }
.em-stat-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 900; color: #111827; }
.em-stat-card strong { display: block; font-size: 0.875rem; color: #111827; }
.em-stat-card > div:last-child span { font-size: 0.6875rem; color: #9ca3af; }

.em-features-clean { display: flex; flex-direction: column; gap: 1.75rem; }
.em-feature-clean { display: flex; align-items: flex-start; gap: 1rem; }
.em-fc-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; margin-top: 0.1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.em-feature-clean:nth-child(1) .em-fc-icon { background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.em-feature-clean:nth-child(2) .em-fc-icon { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.em-feature-clean:nth-child(3) .em-fc-icon { background: linear-gradient(135deg, #fdf2f8, #fce7f3); }
.em-feature-clean:nth-child(4) .em-fc-icon { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
.em-feature-clean strong { display: block; font-size: 1rem; font-weight: 800; color: #111827; margin-bottom: 0.25rem; }
.em-feature-clean p { font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin: 0; }

/* ===== 10. COLD CALLING ===== */
.sec-cold-call { padding: 6rem 0; background: #f9fafb; position: relative; overflow: hidden; }
.sec-cold-call .cc-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(99,102,241,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.12) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 10%, transparent 70%); }

/* Mesh gradient blobs */
.cc-blob-bg { position: absolute; inset: 0; pointer-events: none; }
.cc-blob { position: absolute; border-radius: 50%; filter: blur(100px); }
.cc-blob:nth-child(1) { width: 400px; height: 400px; top: -10%; right: 5%; background: rgba(99,102,241,0.07); animation: ccBlobDrift 15s ease-in-out infinite; }
.cc-blob:nth-child(2) { width: 350px; height: 350px; bottom: -5%; left: 0%; background: rgba(139,92,246,0.06); animation: ccBlobDrift 12s ease-in-out infinite reverse; }
.cc-blob:nth-child(3) { width: 250px; height: 250px; top: 30%; left: 20%; background: rgba(236,72,153,0.04); animation: ccBlobDrift 18s ease-in-out infinite 3s; }
@keyframes ccBlobDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.95); } }

/* Diagonal dashed lines */
.cc-lines-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cc-dash-line { position: absolute; width: 200%; height: 1px; background: repeating-linear-gradient(90deg, rgba(99,102,241,0.08) 0px, rgba(99,102,241,0.08) 8px, transparent 8px, transparent 20px); transform-origin: left center; }
.cc-dash-line:nth-child(1) { top: 15%; left: -20%; transform: rotate(-8deg); animation: ccLineSlide 25s linear infinite; }
.cc-dash-line:nth-child(2) { top: 35%; left: -20%; transform: rotate(-5deg); animation: ccLineSlide 30s linear infinite 5s; }
.cc-dash-line:nth-child(3) { top: 55%; left: -20%; transform: rotate(-10deg); animation: ccLineSlide 20s linear infinite 2s; }
.cc-dash-line:nth-child(4) { top: 75%; left: -20%; transform: rotate(-6deg); animation: ccLineSlide 28s linear infinite 8s; }
.cc-dash-line:nth-child(5) { top: 90%; left: -20%; transform: rotate(-3deg); animation: ccLineSlide 22s linear infinite 12s; }
@keyframes ccLineSlide { 0% { transform: rotate(var(--r, -8deg)) translateX(0); } 100% { transform: rotate(var(--r, -8deg)) translateX(-50%); } }

/* Floating phone icons */
.cc-icons-bg { position: absolute; inset: 0; pointer-events: none; }
.cc-float-icon { position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: white; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: #6366f1; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.cc-float-icon:nth-child(1) { top: 12%; left: 5%; animation: ccIconFloat 7s ease-in-out infinite; }
.cc-float-icon:nth-child(2) { top: 65%; left: 3%; animation: ccIconFloat 8s ease-in-out infinite 1.5s; color: #8b5cf6; }
.cc-float-icon:nth-child(3) { top: 20%; right: 4%; animation: ccIconFloat 6s ease-in-out infinite 3s; color: #ec4899; }
.cc-float-icon:nth-child(4) { bottom: 15%; right: 8%; animation: ccIconFloat 9s ease-in-out infinite 2s; color: #22c55e; }
.cc-float-icon:nth-child(5) { bottom: 35%; left: 10%; animation: ccIconFloat 7.5s ease-in-out infinite 4s; }
@keyframes ccIconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; } 50% { transform: translateY(-12px) rotate(5deg); opacity: 0.7; } }

.call-visual { max-width: 28rem; margin: 0 auto; }
.call-screen { background: linear-gradient(165deg, #0f172a, #1e1b4b 40%, #1e1b4b 60%, #0f172a); border-radius: 2rem; padding: 1.5rem 1.5rem 2rem; text-align: center; box-shadow: 0 0 20px rgba(99,102,241,0.15), 0 0 60px rgba(99,102,241,0.08), 0 30px 60px rgba(0,0,0,0.3); border: 1px solid rgba(99,102,241,0.15); position: relative; overflow: hidden; }
.call-screen::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.08), transparent 40%), radial-gradient(circle at 70% 80%, rgba(139,92,246,0.06), transparent 40%); pointer-events: none; }

.call-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding: 0 0.25rem; position: relative; z-index: 1; }
.call-signal { color: rgba(255,255,255,0.4); font-size: 0.625rem; }
.call-carrier { color: rgba(255,255,255,0.5); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; }
.call-battery { color: rgba(255,255,255,0.4); font-size: 0.625rem; }

.call-avatar-ring { position: relative; width: 5.5rem; height: 5.5rem; margin: 0 auto 1.25rem; }
.call-ring-anim { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(99,102,241,0.3); animation: call-ring-pulse 2s ease-out infinite; }
.call-ring-anim.ring-2 { inset: -20px; border-color: rgba(139,92,246,0.2); animation-delay: 0.5s; }
.call-ring-anim.ring-3 { inset: -30px; border-color: rgba(139,92,246,0.1); animation-delay: 1s; }
@keyframes call-ring-pulse { 0% { transform: scale(0.85); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.call-avatar { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #a78bfa); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 0 20px rgba(99,102,241,0.4), 0 0 40px rgba(99,102,241,0.15); position: relative; z-index: 1; }
.call-avatar-letter { font-size: 1.75rem; font-weight: 800; }

.call-name { font-size: 1.25rem; font-weight: 800; color: white; margin-bottom: 0.25rem; letter-spacing: -0.01em; position: relative; z-index: 1; }
.call-subtitle { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-bottom: 0.75rem; position: relative; z-index: 1; }
.call-duration-wrap { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.call-duration-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); animation: pulse-dot 2s infinite; }
.call-duration { font-size: 1rem; color: #22c55e; font-weight: 700; font-variant-numeric: tabular-nums; }

.call-waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 3rem; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.wave-bar { width: 3px; height: var(--h); background: linear-gradient(to top, #6366f1, #a78bfa); border-radius: 2px; animation: wave-anim 0.8s ease-in-out infinite alternate; box-shadow: 0 0 4px rgba(99,102,241,0.3); }
.wave-bar:nth-child(odd) { animation-delay: 0.1s; }
.wave-bar:nth-child(3n) { animation-delay: 0.3s; }
.wave-bar:nth-child(4n) { animation-delay: 0.5s; }
@keyframes wave-anim { 0% { transform: scaleY(0.4); } 100% { transform: scaleY(1); } }

.call-transcript { text-align: left; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.875rem; padding: 0.875rem; margin-bottom: 0.75rem; position: relative; z-index: 1; max-height: 12rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.3) transparent; }
.call-transcript::-webkit-scrollbar { width: 3px; }
.call-transcript::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 3px; }
.ct-label { font-size: 0.625rem; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.625rem; display: flex; align-items: center; gap: 0.375rem; }
.ct-label i { color: #6366f1; }
.ct-line { font-size: 0.75rem; color: rgba(255,255,255,0.6); line-height: 1.5; margin-bottom: 0.5rem; padding-left: 0.5rem; border-left: 2px solid rgba(99,102,241,0.2); }
.ct-line:last-child { margin-bottom: 0; }
.ct-line.ct-ai { border-left-color: #6366f1; }
.ct-line.ct-user { border-left-color: #22c55e; }
.ct-speaker { font-weight: 700; color: rgba(255,255,255,0.8); margin-right: 0.375rem; font-size: 0.6875rem; }

.call-insights { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.call-insight-chip { font-size: 0.625rem; font-weight: 600; color: rgba(255,255,255,0.7); background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.2); padding: 0.3rem 0.625rem; border-radius: 1rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.call-insight-chip i { font-size: 0.5625rem; color: #a78bfa; }

.call-actions { display: flex; justify-content: center; gap: 0.875rem; position: relative; z-index: 1; }
.call-btn { width: auto; padding: 0.5rem 0.75rem; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; font-size: 0.875rem; transition: all 0.3s; cursor: pointer; }
.call-btn span { font-size: 0.5625rem; font-weight: 600; }
.call-mute { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); }
.call-mute:hover { background: rgba(255,255,255,0.15); color: white; }
.call-hold { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); }
.call-hold:hover { background: rgba(255,255,255,0.15); color: white; }
.call-end { background: #ef4444; color: white; border: none; box-shadow: 0 0 15px rgba(239,68,68,0.3), 0 4px 12px rgba(239,68,68,0.2); }
.call-end:hover { background: #dc2626; transform: scale(1.05); box-shadow: 0 0 20px rgba(239,68,68,0.4), 0 6px 16px rgba(239,68,68,0.25); }
.call-transfer { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); }
.call-transfer:hover { background: rgba(255,255,255,0.15); color: white; }

/* ===== STATS ===== */
.stats-section { padding: 5rem 0; background: #111827; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.25rem; padding: 2rem; text-align: center; transition: border-color 0.3s, transform 0.3s; }
.stat-card:hover { border-color: rgba(99,102,241,0.4); transform: translateY(-4px); }
.stat-card > div:first-child { display: flex; align-items: baseline; justify-content: center; margin-bottom: 0.5rem; }
.stat-number { font-size: 2.75rem; font-weight: 900; color: white; line-height: 1; display: inline; }
.stat-suffix { font-size: 1.25rem; font-weight: 700; color: #818cf8; display: inline; margin-left: 0.125rem; }
.stat-label { font-size: 0.8125rem; color: #9ca3af; margin-bottom: 1rem; }
.stat-bar { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.stat-bar-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #a78bfa); border-radius: 2px; width: 0; transition: width 1.5s cubic-bezier(0.16,1,0.3,1); }

/* ===== CTA ===== */
.cta-section { padding: 8rem 0; position: relative; overflow: hidden; background: white; }
.cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-orb { position: absolute; border-radius: 50%; filter: blur(100px); }
.cta-orb-1 { width: 500px; height: 500px; top: -30%; left: 20%; background: rgba(99,102,241,0.06); }
.cta-orb-2 { width: 400px; height: 400px; bottom: -30%; right: 20%; background: rgba(236,72,153,0.04); }
.cta-content { text-align: center; position: relative; z-index: 1; }
.cta-title { font-size: 2.5rem; font-weight: 900; color: #111827; margin-bottom: 2rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .cta-title { font-size: 3.25rem; } }
.cta-note { margin-top: 1.25rem; font-size: 0.8125rem; color: #9ca3af; }

/* ===== FOOTER ===== */
.site-footer { border-top: 1px solid #f3f4f6; padding: 2rem 0; }
.footer-inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-brand-name { font-weight: 700; font-size: 1.125rem; color: #111827; }
.footer-brand-tagline { font-size: 0.8125rem; color: #9ca3af; }
.footer-copy { font-size: 0.8125rem; color: #9ca3af; }

/* ===== CHAT WIDGET ===== */
#chatbot-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; font-family: 'Inter', sans-serif; }
#chatbot-window { margin-bottom: 1.5rem; width: 24rem; max-width: 90vw; height: 600px; background: white; border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e5e7eb; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.8) translateY(40px); transition: all 0.5s cubic-bezier(0.175,0.885,0.32,1.1); transform-origin: bottom right; }
#chatbot-window.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1) translateY(0); }
.chat-header { padding: 1.5rem; color: #fff; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; flex-shrink: 0; background: #111827; }
.chat-header-stripe { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(to right, #6366f1, #8b5cf6); }
.chat-header-left { display: flex; align-items: center; gap: 1rem; }
.chat-avatar-wrap { position: relative; }
.chat-avatar { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid rgba(99,102,241,0.3); }
.chat-avatar-dot { position: absolute; bottom: 0; right: 0; width: 0.875rem; height: 0.875rem; background: #22c55e; border: 2px solid #111827; border-radius: 50%; }
.chat-name { font-weight: 700; font-size: 1.125rem; line-height: 1; }
.chat-status { font-size: 0.75rem; color: #6ee7b7; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.chat-close-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 1.125rem; transition: background 0.2s; background: none; border: none; cursor: pointer; }
.chat-close-btn:hover { background: rgba(255,255,255,0.1); }
.chat-messages { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 1.5rem; gap: 1rem; background: #fafafa; scrollbar-width: none; }
.chat-messages::-webkit-scrollbar { display: none; }
.chat-messages-date { text-align: center; font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.2em; }
.chat-input-wrap { padding: 1.5rem; background: white; border-top: 1px solid #f3f4f6; flex-shrink: 0; }
.chat-input-form { display: flex; align-items: center; gap: 0.75rem; background: #f3f4f6; border-radius: 1rem; padding: 0.75rem 1.25rem; width: 100%; }
.chat-input-form input { background: transparent; border: none; outline: none; flex: 1; font-size: 0.875rem; font-family: inherit; color: #111827; }
.chat-input-form input::placeholder { color: #9ca3af; }
.chat-input-form button { color: #6366f1; font-size: 1.125rem; transition: transform 0.2s; background: none; border: none; cursor: pointer; }
.chat-input-form button:hover { transform: scale(1.1); }
.chat-toggle-btn { position: relative; width: 4rem; height: 4rem; background: #111827; color: #fff; border-radius: 50%; box-shadow: 0 8px 30px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; z-index: 10000; border: none; cursor: pointer; }
.chat-toggle-btn i { position: absolute; font-size: 1.5rem; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
.chat-toggle-btn .icon-hidden { opacity: 0; transform: rotate(-90deg) scale(0.5); }
@keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.ripple-active::after { content: ""; position: absolute; inset: 0; background: rgba(99,102,241,0.2); border-radius: 9999px; z-index: -1; animation: ripple 2s infinite; }
.chat-toggle-btn.chatbot-toggle-active { background: #111827; }
.chat-toggle-btn.chatbot-toggle-active #icon-msg { opacity: 0; transform: rotate(90deg) scale(0.5); }
.chat-toggle-btn.chatbot-toggle-active #icon-close { opacity: 1; transform: rotate(0deg) scale(1); }
.chat-msg-user { background: #111827; color: #fff; padding: 1rem; border-radius: 1.5rem 1.5rem 0 1.5rem; font-size: 0.875rem; align-self: flex-end; max-width: 80%; word-break: break-word; transform: translateY(20px); opacity: 0; transition: all 0.3s ease; }
.chat-msg-ai { background: white; color: #1f2937; padding: 1rem; border-radius: 1.5rem 1.5rem 1.5rem 0; font-size: 0.875rem; align-self: flex-start; max-width: 80%; word-break: break-word; transform: translateY(20px); opacity: 0; transition: all 0.3s ease; border: 1px solid #e5e7eb; }
.chat-msg-user.show, .chat-msg-ai.show { transform: translateY(0); opacity: 1; }

/* ===== SCHEDULING & LEAD GEN ===== */
.sec-scheduling-leads {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.sec-scheduling-leads::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241,245,249,0.6) 0%, transparent 100%);
    pointer-events: none;
}

.sec-scheduling-leads::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, rgba(255,255,255,0.3) 0%, transparent 100%);
    pointer-events: none;
}

.sl-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(99,102,241,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
}

.sl-mouse-highlight {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s, transform 0.05s;
    background: rgba(99,102,241,0.15);
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    transform: translate(0, 0);
    z-index: 1;
}

.sl-grid-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.sec-scheduling-leads::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%236366f1' stroke-width='0.5' stroke-opacity='0.08'%3E%3Cpath d='M0 0h50M0 0v50'/%3E%3Cpath d='M50 0v50M0 50h50/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.sec-scheduling-leads::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.03) 0%, transparent 60%);
    pointer-events: none;
}

/* Email Section Background */
.em-bg-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.em-bg-dots::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.08'%3E%3Ccircle cx='10' cy='10' r='1.5'/%3E%3Ccircle cx='30' cy='10' r='1.5'/%3E%3Ccircle cx='50' cy='10' r='1.5'/%3E%3Ccircle cx='10' cy='30' r='1.5'/%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3Ccircle cx='50' cy='30' r='1.5'/%3E%3Ccircle cx='10' cy='50' r='1.5'/%3E%3Ccircle cx='30' cy='50' r='1.5'/%3E%3Ccircle cx='50' cy='50' r='1.5'/%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3Ccircle cx='40' cy='20' r='1'/%3E%3Ccircle cx='20' cy='40' r='1'/%3E%3Ccircle cx='40' cy='40' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.em-bg-dots::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b5cf6' fill-opacity='0.05'%3E%3Ccircle cx='25' cy='25' r='3'/%3E%3Ccircle cx='75' cy='25' r='2'/%3E%3Ccircle cx='25' cy='75' r='2'/%3E%3Ccircle cx='75' cy='75' r='3'/%3E%3Ccircle cx='50' cy='50' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.em-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.em-orb-1 {
    width: 500px;
    height: 500px;
    top: -200px;
    left: -150px;
    background: rgba(99,102,241,0.12);
}

.em-orb-2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    right: -100px;
    background: rgba(139,92,246,0.1);
}

.em-grid-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 15% 25%, rgba(99,102,241,0.1) 0%, transparent 30%),
                radial-gradient(circle at 85% 35%, rgba(139,92,246,0.08) 0%, transparent 30%),
                radial-gradient(circle at 25% 75%, rgba(99,102,241,0.09) 0%, transparent 25%),
                radial-gradient(circle at 75% 70%, rgba(139,92,246,0.07) 0%, transparent 35%);
}

.em-random-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a78bfa' fill-opacity='0.06'%3E%3Cpath d='M20 20l2 2M50 20l2 2M30 50l2 2M65 35l2 2M15 65l2 2M45 15l2 2M70 50l2 2M25 70l2 2' stroke='%23a78bfa' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='60' r='1.5'/%3E%3Ccircle cx='38' cy='35' r='1.5'/%3E%3Ccircle cx='72' cy='18' r='1.5'/%3E%3Ccircle cx='58' cy='72' r='1.5'/%3E%3Ccircle cx='22' cy='45' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.em-cross-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%236366f1' stroke-width='0.8' stroke-opacity='0.04'%3E%3Cpath d='M25 10v30M10 25h30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 3rem; }
.sl-calendar-wrap { order: 2; }
.sl-right { order: 1; }
@media (max-width: 900px) { .sl-grid { grid-template-columns: 1fr; } }

/* Calendar */
.sl-calendar-wrap { perspective: 800px; }
.sl-calendar { background: linear-gradient(175deg, #0f172a 0%, #1e1b4b 30%, #312e81 60%, #0f172a 100%); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5), 0 25px 60px rgba(0,0,0,0.4); border: 1px solid rgba(79,70,229,0.2); transition: transform 0.4s, box-shadow 0.4s; }
.sl-calendar:hover { transform: translateY(-4px); box-shadow: 0 0 30px rgba(79,70,229,0.25), 0 30px 70px rgba(0,0,0,0.5); }

.sl-cal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(30,27,75,0.6)); color: white; border-bottom: 1px solid rgba(99,102,241,0.2); }
.sl-cal-title { font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.sl-cal-title i { color: #818cf8; }
.sl-cal-nav { display: flex; gap: 0.5rem; }
.sl-cal-nav span { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(99,102,241,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.625rem; color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s; }
.sl-cal-nav span:hover { background: rgba(99,102,241,0.35); color: white; }

.sl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 1rem 1.25rem 0.75rem; }
.sl-cal-label { font-size: 0.625rem; font-weight: 700; color: rgba(255,255,255,0.5); text-align: center; padding: 0.25rem 0; text-transform: uppercase; }
.sl-day { font-size: 0.75rem; text-align: center; padding: 0.5rem 0.25rem; border-radius: 0.5rem; color: rgba(255,255,255,0.7); font-weight: 500; transition: all 0.2s; cursor: default; }
.sl-day.dim { color: rgba(255,255,255,0.3); }
.sl-day.today { background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; font-weight: 700; box-shadow: 0 2px 8px rgba(99,102,241,0.4); }
.sl-day.has-ev { position: relative; }
.sl-day.has-ev::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #818cf8; box-shadow: 0 0 4px rgba(129,140,248,0.4); }

.sl-cal-events { padding: 0.75rem 1.25rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid rgba(99,102,241,0.2); }
.sl-event { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: rgba(15,23,42,0.5); backdrop-filter: blur(10px); transition: all 0.2s; }
.sl-event:hover { background: rgba(30,41,59,0.6); }
.sl-ev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sl-event.purple .sl-ev-dot { background: #818cf8; box-shadow: 0 0 6px rgba(129,140,248,0.4); }
.sl-event.blue .sl-ev-dot { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.4); }
.sl-event.green .sl-ev-dot { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.4); }
.sl-ev-info { flex: 1; }
.sl-ev-info strong { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.85); }
.sl-ev-info span { font-size: 0.625rem; color: rgba(255,255,255,0.5); }
.sl-ev-badge { font-size: 0.5625rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 1rem; background: rgba(74,222,128,0.2); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.sl-ev-badge.pending { background: rgba(251,191,36,0.2); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }

.sl-cal-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.75rem 1.25rem; border-top: 1px solid rgba(99,102,241,0.2); background: rgba(15,23,42,0.6); }
.sl-cs { text-align: center; }
.sl-cs-val { display: block; font-size: 1.125rem; font-weight: 900; color: rgba(255,255,255,0.85); }
.sl-cs-lbl { display: block; font-size: 0.625rem; color: rgba(255,255,255,0.5); }

/* Funnel */
.sl-right { display: flex; flex-direction: column; gap: 1.75rem; }
.sl-funnel { display: flex; flex-direction: column; gap: 0.625rem; }
.sl-funnel-step { display: flex; align-items: center; gap: 0.875rem; }
.sl-funnel-bar { height: 2.75rem; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 0.75rem; display: flex; align-items: center; padding-left: 0.875rem; transition: all 0.3s; min-width: 3rem; }
.sl-funnel-step:nth-child(2) .sl-funnel-bar { background: linear-gradient(90deg, #818cf8, #a78bfa); }
.sl-funnel-step:nth-child(3) .sl-funnel-bar { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
.sl-funnel-step:nth-child(4) .sl-funnel-bar { background: linear-gradient(90deg, #22c55e, #4ade80); }
.sl-funnel-icon { color: white; font-size: 0.75rem; }
.sl-funnel-info { white-space: nowrap; min-width: 7rem; }
.sl-funnel-info strong { display: block; font-size: 0.875rem; color: #111827; }
.sl-funnel-info span { font-size: 0.75rem; color: #9ca3af; }

/* Features */
.sl-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .sl-features { grid-template-columns: 1fr; } }
.sl-feat { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.125rem; background: white; border: 1px solid #e5e7eb; border-radius: 1rem; transition: all 0.3s; }
.sl-feat:hover { border-color: #c7d2fe; transform: translateY(-2px); box-shadow: 0 0 12px rgba(99,102,241,0.08), 0 8px 24px rgba(0,0,0,0.05); }
.sl-feat-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8125rem; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.sl-feat strong { display: block; font-size: 0.875rem; color: #111827; margin-bottom: 0.25rem; }

/* === CTA SHIMMER === */
.cta-shimmer { position: relative; overflow: hidden; }
.cta-shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 2.5s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* =====================
   CONTACT FORM
   ===================== */
.contact-section {
    padding: 6rem 0;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.contact-section::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(99,102,241,0.06) 0%, transparent 40%),
                      radial-gradient(circle at 90% 30%, rgba(139,92,246,0.05) 0%, transparent 45%),
                      radial-gradient(circle at 15% 75%, rgba(99,102,241,0.04) 0%, transparent 35%),
                      radial-gradient(circle at 85% 85%, rgba(139,92,246,0.04) 0%, transparent 35%);
    pointer-events: none;
}

.contact-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%236366f1' fill-opacity='0.04'%3E%3Cpath d='M20 20a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0-12a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0 24a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm12-12a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-24 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-label {
    color: #6366f1; font-weight: 600;
    font-size: 0.875rem; letter-spacing: 0.05em;
    margin-bottom: 1rem; display: inline-block;
    text-transform: uppercase;
}
.contact-title {
    font-size: 1.875rem; font-weight: 800;
    color: #111827; margin-bottom: 1rem; line-height: 1.2;
}
@media (min-width: 768px) { .contact-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .contact-title { font-size: 3rem; } }
.contact-desc { color: #6b7280; font-size: 1.125rem; margin-bottom: 2rem; }

.contact-features { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-feature { display: flex; align-items: flex-start; gap: 1rem; }
.contact-feature-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 0.125rem;
}
.contact-feature-icon.bg-emerald { background: #e0e7ff; }
.contact-feature-icon.bg-emerald i { color: #6366f1; }
.contact-feature-icon.bg-teal { background: #ede9fe; }
.contact-feature-icon.bg-teal i { color: #8b5cf6; }
.contact-feature-icon.bg-green { background: #fce7f3; }
.contact-feature-icon.bg-green i { color: #ec4899; }
.contact-feature-icon.bg-blue { background: #ddd6fe; }
.contact-feature-icon.bg-blue i { color: #a78bfa; }
.contact-feature-title { font-weight: 600; color: #111827; }
.contact-feature-desc { font-size: 0.875rem; color: #6b7280; }

.contact-img {
    margin-top: 2rem;
    display: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    width: 100%; object-fit: cover; max-height: 200px;
}
@media (min-width: 1024px) { .contact-img { display: block; } }

/* Form card */
.form-card {
    background: #0f172a;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.form-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-label { color: #9ca3af; font-size: 0.875rem; margin-bottom: 0.25rem; display: block; }
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    color: #fff;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.form-input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.3); }
.form-input::placeholder { color: #64748b; }
textarea.form-input { resize: none; }

.phone-row { display: flex; gap: 0.5rem; }
.phone-code {
    width: 25%;
    background: #1e293b;
    color: #a78bfa;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #334155;
    text-align: center;
    font-weight: 500;
}
.phone-input { width: 75%; }

.country-input-wrap { position: relative; }
.country-input-arrow {
    position: absolute; inset: 0; right: 0;
    display: flex; align-items: center;
    justify-content: flex-end;
    padding-right: 0.75rem;
    pointer-events: none;
}
.country-input-arrow i { color: #6b7280; }

.form-submit {
    width: 100%;
    padding: 1rem;
    border-radius: 0.75rem;
    color: #fff !important;
    font-weight: 600;
    font-size: 1rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.form-submit:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 0 20px rgba(99,102,241,0.3); transform: scale(1.02); }
.form-submit:active { transform: scale(0.98); }
.form-submit i { margin-left: 0.5rem; }
.form-note { color: #6b7280; font-size: 0.75rem; text-align: center; margin-top: 0.75rem; }

/* Country Dropdown */
#country-dropdown {
    position: absolute; z-index: 10; width: 100%; margin-top: 0.25rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); max-height: 15rem; overflow: auto;
    opacity: 0; transform: scale(0.95);
    transition: all 0.2s ease-in-out;
    visibility: hidden;
    pointer-events: none;
}
#country-dropdown.active {
    opacity: 1; transform: scale(1);
    visibility: visible;
    pointer-events: auto;
}
#country-options { padding: 0.5rem 0; color: #111827; }
.country-option {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.country-option:hover, .country-option.focused {
    background: #ede9fe;
}

.form-input-error { border-color: #ef4444; }
.form-error-text { color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem; }
.error-message { margin-top: 0.25rem; }

/* =====================
   FOOTER
   ===================== */
.footer {
    background: #111827;
    color: #9ca3af;
    padding-top: 4rem;
    padding-bottom: 2rem;
    position: relative;
}
.footer::before {
    content: ''; position: absolute; top: -60px; left: 0; right: 0; height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%230f172a' d='M0,30 C360,60 720,0 1080,30 C1260,45 1380,35 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

.footer-brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.footer-brand img { height: 1.75rem; width: 1.75rem; }
.footer-brand span { font-weight: 700; color: #fff; font-size: 1.125rem; }
.footer-desc { font-size: 0.875rem; line-height: 1.7; }

.footer-heading { color: #fff; font-weight: 600; margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a { font-size: 0.875rem; color: #9ca3af; transition: color 0.3s; }
.footer-links a:hover { color: #a78bfa; }

.footer-bottom {
    border-top: 1px solid #1f2937;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-copy { font-size: 0.875rem; }
.footer-socials { display: flex; gap: 1rem; }
.footer-socials a { color: #6b7280; transition: color 0.3s; }
.footer-socials a:hover { color: #8b5cf6; }
.footer-socials a i { font-size: 1.125rem; }

/* === UTILITY CLASSES === */
.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
.content-padded { padding: 0 1.5rem; }
.sl-feat p { font-size: 0.75rem; color: #6b7280; line-height: 1.5; margin: 0; }