diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index ae7a37ef..ba49969e 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -5,21 +5,44 @@ import '@/styles/landing.css' const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000' +const FAQ_ITEMS = [ + { + q: 'How is this different from just using ChatGPT?', + a: 'FlowPilot is purpose-built for MSP troubleshooting. It understands your stack (AD, Exchange, networking, VPN), captures every diagnostic step as you work, and generates formatted ticket notes ready for your PSA. ChatGPT doesn\u2019t build documentation and can\u2019t push notes to ConnectWise.', + }, + { + q: 'Is my data safe?', + a: 'Troubleshooting sessions are encrypted and isolated per team. We never use your data to train AI models. You control what gets documented and exported.', + }, + { + q: 'What PSA tools do you integrate with?', + a: 'Launching with ConnectWise PSA \u2014 session documentation exports directly as internal ticket notes. Atera and Syncro integrations are next. During beta, you can copy formatted notes into any PSA.', + }, + { + q: 'What counts as a \u201csession\u201d?', + a: 'One session = one troubleshooting conversation. Describe an issue, work through it with FlowPilot, resolve it. Whether that takes 2 minutes or 2 hours, it\u2019s one session. Free plan: 20 sessions/month. Pro and Team: unlimited.', + }, + { + q: 'What if FlowPilot gets it wrong?', + a: 'FlowPilot is a copilot, not autopilot. Every suggestion is a recommendation \u2014 you decide what to act on. And because every step is documented, you always have a full audit trail of what was tried and why.', + }, +] + export default function LandingPage() { const [navScrolled, setNavScrolled] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [betaEmail, setBetaEmail] = useState('') const [betaStatus, setBetaStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle') + const [betaError, setBetaError] = useState('') + const [openFaq, setOpenFaq] = useState(null) const mobileMenuRef = useRef(null) - // Nav scroll effect useEffect(() => { const handleScroll = () => setNavScrolled(window.scrollY > 40) window.addEventListener('scroll', handleScroll) return () => window.removeEventListener('scroll', handleScroll) }, []) - // Close mobile menu on click outside useEffect(() => { function handleClickOutside(e: MouseEvent) { if (mobileMenuRef.current && !mobileMenuRef.current.contains(e.target as Node)) { @@ -32,10 +55,8 @@ export default function LandingPage() { } }, [mobileMenuOpen]) - // Close mobile menu on scroll to section const handleMobileNavClick = () => setMobileMenuOpen(false) - // Scroll reveal useEffect(() => { const els = document.querySelectorAll('.landing-reveal') const observer = new IntersectionObserver( @@ -52,458 +73,453 @@ export default function LandingPage() { const handleBetaSubmit = useCallback(async (e: React.FormEvent) => { e.preventDefault() - if (!betaEmail.trim() || betaStatus === 'sending') return + const trimmed = betaEmail.trim() + if (!trimmed || betaStatus === 'sending') return + if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) { + setBetaStatus('error') + setBetaError('Enter a valid email address.') + return + } setBetaStatus('sending') + setBetaError('') try { const resp = await fetch(`${API_URL}/api/v1/beta-signup`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ email: betaEmail }), + body: JSON.stringify({ email: trimmed }), }) if (!resp.ok) throw new Error('Signup failed') setBetaStatus('sent') setBetaEmail('') } catch { setBetaStatus('error') - setTimeout(() => setBetaStatus('idle'), 3000) + setBetaError('Could not complete signup. Please try again or email hello@resolutionflow.com.') } }, [betaEmail, betaStatus]) + const toggleFaq = (index: number) => { + setOpenFaq(prev => prev === index ? null : index) + } + return ( <>
-
-
+ Skip to content -
- {/* Navigation */} - - {/* Hero */} +
+ {/* Hero — left-aligned, two columns */}
-
Now in Beta — Join early access
-

- Resolve tickets faster.
- Notes write themselves. -

-

- ResolutionFlow is your AI troubleshooting copilot. Describe the issue, get expert guidance fixing it, and get clean ticket documentation — without writing a single note. -

-
- Start Free - See How It Works +
+
+
Now in Beta
+

+ Resolve tickets faster.
+ Notes write themselves. +

+

+ Your AI troubleshooting copilot for MSPs. Describe the issue, get expert guidance, and get clean ticket documentation — without writing a single note. +

+
+ Start Free + See How It Works +
+

+ Built by a 15-year MSP veteran who got tired of empty ticket notes. +

+
+
+
+
+
+
+ 🔒 + app.resolutionflow.com/pilot +
+
+
+
+
+
+ You + User can't access shared drive after password reset +
+
+
+
+ + FlowPilot is thinking… +
+
+
+
+ FlowPilot + Likely a cached credential issue. Let's check: +
+
+
+
+ FlowPilot + 1. Run klist purge to clear Kerberos tickets +
+
+
+
+ FlowPilot + 2. Credential Manager → remove saved share entries +
+
+
+
+ Auto-doc + 3 steps captured ✓ +
+
+
+
+
+
- {/* Social Proof Bar */} -
-

Built by MSP engineers, for MSP engineers

-
-
-
15+
-
Years MSP Experience
-
-
-
70%
-
Less Time on Documentation
-
-
-
100%
-
Auto-Generated Documentation
-
-
-
- - {/* App Preview */} -
-
-
-
-
- ResolutionFlow - × -
-
-
- 🔒 - app.resolutionflow.com/pilot -
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
- FlowPilot -
-
-
- Session History -
-
-
- Guided Flows -
-
-
- Scripts -
-
-
- Analytics -
-
-
-
-
-
- You: - User can't access shared drive after password reset -
-
-
-
- - FlowPilot is thinking... -
-
-
-
- FlowPilot: - This is likely a cached credential issue. Let's check a few things: -
-
-
-
- FlowPilot: - 1. Run klist purge to clear Kerberos tickets -
-
-
-
- FlowPilot: - 2. Open Credential Manager → remove saved entries for the share -
-
-
-
- Auto-doc: - 3 steps captured ✓ -
-
-
-
-
-
-
- -
- - {/* Problem Section */} -
+ {/* Problem — asymmetric: headline left, cards right */} +
-
The Problem
-

Documentation is broken.
Everyone knows it.

-
- Engineers don't want to write it. Managers hate chasing it. Clients never see it. The same issues get solved from scratch every time. -
-
- - - - +
+
+
The Problem
+

Documentation is broken.
Everyone knows it.

+

Engineers don't want to write it. Managers hate chasing it. Clients never see it. The same issues get solved from scratch — every time.

+
+
+ + + + +
-
- - {/* Brand Equation */} + {/* Equation */}
-
The Answer
-
- Resolution - + - Documentation - − - Time - = - ResolutionFlow +
+
The Answer
+
+ Resolution + + + Documentation + − + Time + = + ResolutionFlow +
+

+ What if documentation was a byproduct of solving the issue — not a separate task? +

-

- What if documentation was a byproduct of solving the issue — not a separate task? What if every ticket your team touched had clean, detailed notes — without anyone writing them? -

-
- - {/* How It Works */} -
+ {/* How It Works — zigzag */} +
How It Works

Three steps. Zero note-writing.

-
- Just describe the issue. FlowPilot handles the rest. -
-
-
+
+
+
+
+
01

Describe the Issue

-

Type what's happening, paste an error message, or drop a screenshot. FlowPilot understands MSP environments — AD, Exchange, networking, VPN, you name it.

-
-
-
💬 “User can't access shared drive after password reset, getting Access Denied in Event Viewer”
-
+

Type what's happening, paste an error, or drop a screenshot. FlowPilot understands MSP environments — AD, Exchange, networking, VPN, you name it.

+
+
+
+ 💬 + User can't access shared drive after password reset, getting Access Denied in Event Viewer
- -
+
+
+
+
02

Troubleshoot Together

-

FlowPilot acts like a senior engineer on the call with you. It suggests next steps, provides commands to run, and captures every action — documentation builds itself as you work.

-
-
-
- FlowPilot: - Is the user on VPN? -
-
- Engineer: - Yes, Cisco AnyConnect -
-
- FlowPilot: - Check split tunnel config → -
-
- Auto-doc: - Step captured ✓ -
+

FlowPilot acts like a senior engineer on the call. It suggests next steps, provides commands, and captures every action — documentation builds itself as you work.

+
+
+
+
+ FlowPilot + Is the user on VPN? +
+
+ You + Yes, Cisco AnyConnect +
+
+ FlowPilot + Check split tunnel config → +
+
+ Auto-doc + Step captured ✓
- -
+
+
+
+
03

Resolve & Document

-

Hit resolve and get clean, timestamped ticket notes — ready to paste into ConnectWise, Atera, or Syncro. Every step you took, every command you ran, documented automatically.

-
-
-
ConnectWise Ticket #48291
-
10:04✓Verified VPN connection active
-
10:06✓Split tunnel misconfigured — fixed
-
10:08✓Confirmed Outlook sync restored
-
10:09✓Resolution: VPN split tunnel updated
-
+

Hit resolve and get clean, timestamped ticket notes — ready to paste into ConnectWise, Atera, or Syncro. Every step documented automatically.

+
+
+
+
ConnectWise Ticket #48291
+
10:04✓Verified VPN connection active
+
10:06✓Split tunnel misconfigured — fixed
+
10:08✓Confirmed Outlook sync restored
+
10:09✓Resolution: VPN split tunnel updated
-
- {/* Features */} -
+
Features
-

Troubleshoot faster.
Document everything. Automatically.

+

Everything you need to troubleshoot faster.

+ +
+
+ +
+
+

FlowPilot — Your AI Copilot

+

Like having a senior engineer on every call. Describe the issue, get expert troubleshooting guidance, and documentation writes itself — as a byproduct of solving the problem.

+
+
+
} - title="FlowPilot — Your AI Copilot" - description="Like having a senior engineer on every call. Describe the issue, get expert troubleshooting guidance, and documentation writes itself — as a byproduct of solving the problem." + icon={} + title="Guided Flows" + description="Build step-by-step troubleshooting paths your team can follow. Great for onboarding and consistency." /> } - title="Guided Troubleshooting Flows" - description="Build step-by-step troubleshooting paths your team can follow. Great for standard procedures, onboarding new engineers, or ensuring consistency." + icon={} + title="Zero Empty Tickets" + description="Every session generates timestamped notes, formatted for your PSA. No more empty ticket closures." /> } - title="Zero Empty Ticket Notes" - description="Every troubleshooting session generates timestamped, detailed notes — formatted for your PSA. Your team will never close a ticket with empty notes again." + icon={} + title="Team Knowledge" + description="Solutions are saved and surfaced when the next engineer hits a similar issue." /> } - title="Team Knowledge That Grows" - description="Every resolved session makes your team smarter. Solutions are saved and surfaced automatically when the next engineer hits a similar issue." + icon={} + title="Session Analytics" + description="Track resolution times, identify recurring issues, and measure team performance." /> } - title="Session History & Analytics" - description="See every troubleshooting session your team has run. Track resolution times, identify common issues, and measure team performance." - /> - } + icon={} title="PSA Integration" - description="Connect directly to ConnectWise, Atera, and Syncro. Export session docs straight to tickets — no copy-paste needed." + description="Connect to ConnectWise, Atera, and Syncro. Push session docs straight to tickets." />
-
- {/* Pricing */} -
+
Pricing

Simple pricing. No surprises.

-
Start free. Upgrade when your team is ready.
+

Start free. Upgrade when your team is ready.

+

One session = one troubleshooting conversation, regardless of length.

- Need Enterprise (25+ techs, SSO, custom branding)?{' '} - Contact us + Enterprise (25+ techs, SSO, custom branding)?{' '} + Let's talk

-
- - {/* Testimonial */} -
-
- We used to spend more time writing ticket notes than solving the actual issue. Now it just… happens. The documentation writes itself while we work. + {/* FAQ */} +
+
+
FAQ
+

Common questions

+
+ {FAQ_ITEMS.map((item, i) => ( +
+ +
+

{item.a}

+
+
+ ))} +
-
- Beta Tester — MSP Engineer, Southeast US +
+ + {/* Founder — replaces anonymous testimonial */} +
+
+
Why We Built This
+
+ After 15 years in the MSP trenches, I got tired of the same cycle: solve the issue in 10 minutes, spend 20 minutes writing notes about it. Or worse — close the ticket with “Fixed issue” because there's no time. ResolutionFlow is the tool I wanted on every call. +
+
— Michael, Founder
-
- {/* CTA */}
-

Ready to never write ticket notes again?

-

Join the beta. Troubleshoot your next ticket with FlowPilot and see the documentation write itself.

-
- setBetaEmail(e.target.value)} - required - /> - -
- {betaStatus === 'sent' && ( -

Thanks! We'll be in touch with beta access details.

- )} - {betaStatus === 'error' && ( -

Something went wrong. Please try again.

- )} -

Free to start. No credit card required.

+
+

Ready to stop writing ticket notes?

+

Join the beta. Troubleshoot your next ticket with FlowPilot.

+
+
+ { + setBetaEmail(e.target.value) + if (betaStatus === 'error') { setBetaStatus('idle'); setBetaError('') } + }} + required + aria-describedby="beta-status" + /> + +
+
+ {betaStatus === 'sent' && ( +

You're in. We'll send beta access details soon.

+ )} + {betaStatus === 'error' && betaError && ( +

{betaError}

+ )} +
+
+

Free to start. No credit card required.

+
{/* Footer */}
-
- - - - - - - +
+ + + + + + +
- © 2026 ResolutionFlow. All rights reserved. + © 2026 ResolutionFlow
  • Privacy
    • @@ -512,7 +528,7 @@ export default function LandingPage() {
-
+
) @@ -533,11 +549,11 @@ function ProblemCard({ icon, color, title, description }: { ) } -function FeatureCard({ icon, title, description, highlight }: { - icon: React.ReactNode; title: string; description: string; highlight?: boolean +function FeatureCard({ icon, title, description }: { + icon: React.ReactNode; title: string; description: string }) { return ( -
+
{icon}

{title}

{description}

@@ -545,12 +561,13 @@ function FeatureCard({ icon, title, description, highlight }: { ) } -function PricingCard({ name, target, amount, period, note, features, btnLabel, btnStyle, featured }: { +function PricingCard({ name, target, amount, period, note, features, btnLabel, btnStyle, featured, plan }: { name: string; target: string; amount: string; period?: string; note: string - features: string[]; btnLabel: string; btnStyle: 'outline' | 'filled'; featured?: boolean + features: string[]; btnLabel: string; btnStyle: 'outline' | 'filled'; featured?: boolean; plan: string }) { return (
+ {featured &&
Most Popular
}
{name}
{target}
@@ -561,7 +578,7 @@ function PricingCard({ name, target, amount, period, note, features, btnLabel, b
    {features.map(f =>
  • {f}
    • )}
- {btnLabel} + {btnLabel}
) } diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css index 9567ec51..e80207a4 100644 --- a/frontend/src/styles/landing.css +++ b/frontend/src/styles/landing.css @@ -1,54 +1,67 @@ /* ============================================ - RESOLUTIONFLOW LANDING PAGE — Design System v4 - All classes prefixed with landing- to avoid - collisions with the main app styles. + RESOLUTIONFLOW LANDING PAGE + Self-contained styles. No dependency on theme + variables that may resolve incorrectly. ============================================ */ +/* ---- LANDING COLOR PALETTE ---- */ +.landing-page { + --lp-bg: #14161d; + --lp-bg-alt: #181a22; + --lp-card: #1e2028; + --lp-elevated: #262830; + --lp-border: #2a2e3a; + --lp-border-hover: #3a3f4e; + --lp-text-heading: #f0f2f5; + --lp-text-body: #d0d4dc; + --lp-text-secondary: #9198a8; + --lp-text-dim: #636b7e; + --lp-accent: #60a5fa; + --lp-accent-soft: rgba(96, 165, 250, 0.10); + --lp-accent-text: #93bbfc; + --lp-btn: var(--color-accent, #f97316); + --lp-success: #34d399; + --lp-danger: #f87171; + --lp-warning: #fbbf24; +} + +/* ---- BASE ---- */ .landing-page { font-family: 'IBM Plex Sans', sans-serif; - background: var(--color-bg-page); - color: var(--color-text-primary); + background: var(--lp-bg); + color: var(--lp-text-body); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; min-height: 100vh; } -/* ---- AMBIENT BACKGROUND ---- */ -/* Subtle top glow only — no animated pulses or blur */ -.landing-ambient-glow { - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - overflow: hidden; - background: radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.12) 0%, transparent 60%); -} - -.landing-ambient-glow::before, -.landing-ambient-glow::after { - display: none; -} - -/* ---- GRID PATTERN ---- */ -.landing-grid-pattern { - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - background-image: - linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); - background-size: 64px 64px; - mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%); -} - -.landing-page-content { +.landing-main { position: relative; z-index: 1; overflow-x: hidden; } +/* ---- SKIP LINK ---- */ +.landing-skip-link { + position: absolute; + top: -100px; + left: 16px; + z-index: 200; + padding: 8px 16px; + background: var(--lp-accent); + color: #fff; + font-size: 0.875rem; + font-weight: 600; + border-radius: 0 0 8px 8px; + text-decoration: none; + transition: top 0.2s; +} + +.landing-skip-link:focus { + top: 0; +} + /* ---- NAVIGATION ---- */ .landing-nav { position: fixed; @@ -57,12 +70,13 @@ right: 0; z-index: 100; padding: 0 2rem; - transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; + transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } .landing-nav.scrolled { - background: rgba(26, 28, 35, 0.95); - border-bottom: 1px solid var(--color-border-default); + background: rgba(20, 22, 29, 0.95); + border-bottom: 1px solid var(--lp-border); + backdrop-filter: blur(8px); } .landing-nav-inner { @@ -84,8 +98,8 @@ .landing-nav-logo-icon { width: 36px; height: 36px; - background: var(--color-accent); - border-radius: 10px; + background: var(--lp-btn); + border-radius: 8px; display: flex; align-items: center; justify-content: center; @@ -100,12 +114,12 @@ font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.25rem; font-weight: 700; - color: var(--color-text-primary); + color: var(--lp-text-heading); letter-spacing: -0.02em; } .landing-nav-wordmark span { - color: var(--color-accent-text); + color: var(--lp-accent-text); } .landing-nav-links { @@ -120,7 +134,7 @@ .landing-nav-links a { font-size: 0.875rem; font-weight: 500; - color: var(--color-text-secondary); + color: var(--lp-text-secondary); text-decoration: none; transition: color 0.2s; letter-spacing: 0.01em; @@ -128,7 +142,7 @@ } .landing-nav-links a:hover { - color: var(--color-text-primary); + color: var(--lp-text-heading); } .landing-nav-cta { @@ -140,7 +154,7 @@ .landing-btn-ghost { font-size: 0.875rem; font-weight: 500; - color: var(--color-text-secondary); + color: var(--lp-text-secondary); text-decoration: none; padding: 0.5rem 1rem; border-radius: 8px; @@ -148,7 +162,7 @@ } .landing-btn-ghost:hover { - color: var(--color-text-primary); + color: var(--lp-text-heading); background: rgba(255, 255, 255, 0.06); } @@ -159,7 +173,7 @@ text-decoration: none; padding: 0.55rem 1.25rem; border-radius: 8px; - background: var(--color-accent); + background: var(--lp-btn); transition: opacity 0.25s, transform 0.25s; letter-spacing: -0.01em; border: none; @@ -171,411 +185,13 @@ transform: translateY(-1px); } -/* ---- HERO ---- */ -.landing-hero { - padding: 10rem 2rem 6rem; - text-align: center; - max-width: 900px; - margin: 0 auto; +/* ---- SECTIONS ---- */ +.landing-section { + padding: 5rem 2rem; } -.landing-hero-badge { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 6px 16px; - border-radius: 100px; - background: var(--color-bg-card); - border: 1px solid var(--color-border-default); - font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.75rem; - font-weight: 500; - color: var(--color-accent-text); - margin-bottom: 2rem; - letter-spacing: 0.03em; - animation: landingFadeInDown 0.8s ease-out; -} - -.landing-hero-badge::before { - content: ''; - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--color-accent); - animation: landingPulse 2s ease-in-out infinite; -} - -@keyframes landingPulse { - - 0%, - 100% { - opacity: 0.5; - } - - 50% { - opacity: 1; - } -} - -.landing-hero h1 { - font-family: 'Bricolage Grotesque', sans-serif; - font-size: clamp(2.75rem, 6vw, 4.25rem); - font-weight: 800; - line-height: 1.08; - letter-spacing: -0.035em; - margin-bottom: 1.5rem; - animation: landingFadeInUp 0.8s ease-out 0.15s both; -} - -.landing-gradient-text { - color: var(--color-accent-text); -} - -.landing-hero-sub { - font-size: 1.2rem; - font-weight: 400; - color: var(--color-text-secondary); - line-height: 1.7; - max-width: 600px; - margin: 0 auto 2.5rem; - animation: landingFadeInUp 0.8s ease-out 0.3s both; -} - -.landing-hero-actions { - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; - animation: landingFadeInUp 0.8s ease-out 0.45s both; -} - -.landing-btn-hero-primary { - font-size: 1rem; - font-weight: 600; - color: #fff; - text-decoration: none; - padding: 0.85rem 2rem; - border-radius: 10px; - background: var(--color-accent); - transition: opacity 0.3s, transform 0.3s; - letter-spacing: -0.01em; - border: none; - cursor: pointer; -} - -.landing-btn-hero-primary:hover { - opacity: 0.9; - transform: translateY(-2px); -} - -.landing-btn-hero-primary:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - -.landing-btn-hero-secondary { - font-size: 1rem; - font-weight: 500; - color: var(--color-text-secondary); - text-decoration: none; - padding: 0.85rem 2rem; - border-radius: 10px; - background: var(--color-bg-card); - border: 1px solid var(--color-border-default); - transition: background 0.3s, border-color 0.3s, color 0.3s; -} - -.landing-btn-hero-secondary:hover { - background: rgba(255, 255, 255, 0.06); - border-color: rgba(255, 255, 255, 0.1); - color: var(--color-text-primary); -} - -/* ---- SOCIAL PROOF BAR ---- */ -.landing-social-proof-bar { - text-align: center; - padding: 3rem 2rem 1rem; - animation: landingFadeInUp 0.8s ease-out 0.6s both; -} - -.landing-social-proof-bar>p { - font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.75rem; - color: #5a6170; - letter-spacing: 0.08em; - text-transform: uppercase; - margin-bottom: 1.5rem; -} - -.landing-proof-stats { - display: flex; - justify-content: center; - gap: 3rem; - flex-wrap: wrap; -} - -.landing-proof-stat { - text-align: center; -} - -.landing-proof-stat .number { - font-family: 'Bricolage Grotesque', sans-serif; - font-size: 1.75rem; - font-weight: 700; - color: var(--color-accent-text); -} - -.landing-proof-stat .label { - font-size: 0.8rem; - color: #5a6170; - margin-top: 0.25rem; -} - -/* ---- APP PREVIEW ---- */ -.landing-app-preview { - max-width: 1000px; - margin: 3rem auto 0; - padding: 0 2rem; - animation: landingFadeInUp 1s ease-out 0.75s both; -} - -.landing-preview-window { - border-radius: 12px; - border: 1px solid var(--color-border-default); - background: var(--color-bg-card); - overflow: hidden; - box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4); -} - -.landing-preview-titlebar { - display: flex; - align-items: center; - padding: 0 0 0 14px; - height: 40px; - background: rgba(255, 255, 255, 0.02); - border-bottom: 1px solid var(--color-border-default); -} - -.landing-preview-tab { - display: flex; - align-items: center; - gap: 8px; - padding: 0 14px; - height: 100%; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.7rem; - color: var(--color-text-secondary); - border-right: 1px solid var(--color-border-default); - background: rgba(255, 255, 255, 0.02); - position: relative; -} - -.landing-preview-tab::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: var(--color-accent); -} - -.landing-tab-icon { - width: 14px; - height: 14px; - border-radius: 3px; - background: var(--color-accent); - flex-shrink: 0; -} - -.landing-tab-close { - font-size: 0.65rem; - color: #5a6170; - margin-left: 4px; -} - -.landing-preview-url-bar { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - height: 100%; -} - -.landing-preview-url { - display: flex; - align-items: center; - gap: 6px; - padding: 4px 12px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid var(--color-border-default); - font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.65rem; - color: #5a6170; -} - -.landing-lock-icon { - color: var(--color-success); - font-size: 0.6rem; -} - -.landing-preview-window-controls { - display: flex; - align-items: center; - margin-left: auto; - height: 100%; -} - -.landing-win-btn { - width: 46px; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - color: #5a6170; - font-size: 0.7rem; - transition: background 0.15s; -} - -.landing-win-btn:hover { - background: rgba(255, 255, 255, 0.06); -} - -.landing-win-btn.close:hover { - background: #c42b1c; - color: white; -} - -.landing-win-btn svg { - width: 12px; - height: 12px; - stroke: currentColor; - fill: none; - stroke-width: 1.5; -} - -.landing-preview-body { - padding: 2rem; - min-height: 340px; - display: flex; - gap: 1.5rem; -} - -.landing-preview-sidebar { - width: 200px; - flex-shrink: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.landing-preview-sidebar-item { - padding: 8px 12px; - border-radius: 8px; - font-size: 0.8rem; - color: var(--color-text-secondary); - display: flex; - align-items: center; - gap: 8px; -} - -.landing-preview-sidebar-item.active { - background: rgba(96, 165, 250, 0.08); - color: var(--color-accent-text); - border-left: 3px solid var(--color-accent); -} - -.landing-preview-sidebar-item .dot { - width: 8px; - height: 8px; - border-radius: 50%; -} - -.landing-preview-canvas { - flex: 1; - background: rgba(255, 255, 255, 0.01); - border-radius: 12px; - border: 1px dashed var(--color-border-default); - display: flex; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; -} - -/* Mini tree */ -.landing-mini-tree { - display: flex; - flex-direction: column; - align-items: center; -} - -.landing-tree-node { - padding: 10px 20px; - border-radius: 10px; - font-size: 0.75rem; - font-weight: 600; - white-space: nowrap; -} - -.landing-tree-node.root { - background: var(--color-accent); - color: #fff; -} - -.landing-tree-node.decision { - background: var(--color-bg-card); - border: 1px solid var(--color-border-default); - color: var(--color-text-primary); - font-size: 0.7rem; -} - -.landing-tree-connector { - width: 2px; - height: 24px; - background: rgba(96, 165, 250, 0.2); -} - -.landing-tree-branch { - display: flex; - gap: 2rem; - position: relative; -} - -.landing-tree-branch::before { - content: ''; - position: absolute; - top: 0; - left: 50%; - width: calc(100% - 100px); - transform: translateX(-50%); - height: 2px; - background: rgba(96, 165, 250, 0.15); -} - -.landing-tree-branch-arm { - display: flex; - flex-direction: column; - align-items: center; -} - -.landing-tree-branch-arm .landing-tree-connector { - height: 18px; -} - -.landing-tree-label { - font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.6rem; - color: var(--color-accent-text); - margin-bottom: 4px; - opacity: 0.7; -} - -/* ---- SECTION LAYOUT ---- */ -.landing-page section { - padding: 4rem 2rem; +.landing-section-alt { + background: var(--lp-bg-alt); } .landing-section-inner { @@ -585,18 +201,19 @@ .landing-section-label { font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.75rem; + font-size: 0.7rem; font-weight: 600; - color: var(--color-accent-text); - letter-spacing: 0.12em; + color: var(--lp-accent-text); + letter-spacing: 0.14em; text-transform: uppercase; - margin-bottom: 1rem; + margin-bottom: 0.75rem; } .landing-section-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; + color: var(--lp-text-heading); letter-spacing: -0.03em; line-height: 1.15; margin-top: 0; @@ -604,356 +221,629 @@ } .landing-section-desc { - font-size: 1.1rem; - color: var(--color-text-secondary); + font-size: 1.05rem; + color: var(--lp-text-secondary); line-height: 1.7; - max-width: 580px; + max-width: 520px; + margin-bottom: 0; } -/* ---- SECTION DIVIDER ---- */ -.landing-section-divider { - max-width: 1100px; +/* ---- HERO ---- */ +.landing-hero { + padding: 9rem 2rem 5rem; +} + +.landing-hero-inner { + max-width: 1200px; margin: 0 auto; - height: 1px; - background: var(--color-bg-elevated); -} - -/* ---- PROBLEM SECTION ---- */ -.landing-problem-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 3rem; - margin-top: 3.5rem; - align-items: start; + gap: 4rem; + align-items: center; } -.landing-problem-card { - padding: 2rem; - border-radius: 16px; - background: var(--color-bg-card); - border: 1px solid var(--color-border-default); - transition: border-color 0.3s, transform 0.3s; +.landing-hero-content { + animation: landingFadeInUp 0.8s ease-out; } -.landing-problem-card:hover { - border-color: rgba(255, 255, 255, 0.12); +.landing-hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 5px 14px; + border-radius: 100px; + background: var(--lp-card); + border: 1px solid var(--lp-border); + font-size: 0.7rem; + font-weight: 500; + color: var(--lp-accent-text); + margin-bottom: 1.5rem; + letter-spacing: 0.03em; +} + +.landing-hero-badge::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--lp-accent); + animation: landingPulse 2s ease-in-out infinite; +} + +@keyframes landingPulse { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 1; } +} + +.landing-hero h1 { + font-family: 'Bricolage Grotesque', sans-serif; + font-size: clamp(2.5rem, 5vw, 3.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.035em; + color: var(--lp-text-heading); + margin-bottom: 1.25rem; +} + +.landing-hero-accent { + color: var(--lp-accent-text); +} + +.landing-hero-sub { + font-size: 1.1rem; + color: var(--lp-text-secondary); + line-height: 1.7; + max-width: 480px; + margin-bottom: 2rem; +} + +.landing-hero-actions { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 2rem; +} + +.landing-btn-hero-primary { + font-size: 1rem; + font-weight: 600; + color: #fff; + text-decoration: none; + padding: 0.8rem 1.75rem; + border-radius: 8px; + background: var(--lp-btn); + transition: opacity 0.3s, transform 0.3s; + letter-spacing: -0.01em; + border: none; + cursor: pointer; + white-space: nowrap; +} + +.landing-btn-hero-primary:hover { + opacity: 0.9; transform: translateY(-2px); } +.landing-btn-hero-primary:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; +} + +.landing-btn-hero-secondary { + font-size: 1rem; + font-weight: 500; + color: var(--lp-text-secondary); + text-decoration: none; + padding: 0.8rem 1.75rem; + border-radius: 8px; + border: 1px solid var(--lp-border); + transition: background 0.3s, border-color 0.3s, color 0.3s; +} + +.landing-btn-hero-secondary:hover { + background: rgba(255, 255, 255, 0.04); + border-color: var(--lp-border-hover); + color: var(--lp-text-heading); +} + +.landing-hero-credibility { + font-size: 0.8rem; + color: var(--lp-text-dim); + font-style: italic; + margin: 0; +} + +/* Hero visual */ +.landing-hero-visual { + animation: landingPreviewEntrance 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; +} + +/* ---- PREVIEW WINDOW ---- */ +.landing-preview-window { + border-radius: 8px; + border: 1px solid var(--lp-border); + background: var(--lp-card); + overflow: hidden; + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); +} + +.landing-preview-titlebar { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 14px; + background: rgba(255, 255, 255, 0.02); + border-bottom: 1px solid var(--lp-border); +} + +.landing-preview-dots { + display: flex; + gap: 6px; +} + +.landing-preview-dots span { + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--lp-elevated); +} + +.landing-preview-dots span:first-child { + background: #ef4444; +} + +.landing-preview-dots span:nth-child(2) { + background: #eab308; +} + +.landing-preview-dots span:last-child { + background: #22c55e; +} + +.landing-preview-url { + display: flex; + align-items: center; + gap: 6px; + padding: 3px 10px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid var(--lp-border); + font-size: 0.6rem; + color: var(--lp-text-dim); + flex: 1; + max-width: 260px; +} + +.landing-lock-icon { + color: var(--lp-success); + font-size: 0.55rem; +} + +.landing-preview-body { + padding: 1.25rem; + min-height: 260px; + display: flex; + align-items: center; +} + +/* ---- MOCK ELEMENTS ---- */ +.landing-mock-session { + width: 100%; + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.landing-mock-session.compact { + gap: 0.35rem; +} + +.landing-mock-chat-line { + display: flex; + align-items: flex-start; + gap: 8px; + font-size: 0.65rem; + font-family: 'IBM Plex Sans', sans-serif; + padding: 6px 10px; + border-radius: 6px; +} + +.landing-mock-chat-line.user { + background: rgba(255, 255, 255, 0.03); +} + +.landing-mock-chat-line.ai { + background: var(--lp-accent-soft); +} + +.landing-mock-chat-line.doc { + background: rgba(52, 211, 153, 0.06); + border: 1px solid rgba(52, 211, 153, 0.1); +} + +.landing-mock-chat-line .label { + font-weight: 700; + min-width: 52px; + flex-shrink: 0; + color: var(--lp-text-dim); +} + +.landing-mock-chat-line.ai .label { + color: var(--lp-accent); +} + +.landing-mock-chat-line.doc .label { + color: var(--lp-success); +} + +.landing-mock-chat-line .text { + color: var(--lp-text-secondary); + overflow-wrap: anywhere; + min-width: 0; +} + +.landing-mock-chat-line code { + font-family: 'JetBrains Mono', monospace; + font-size: 0.6rem; + padding: 1px 5px; + border-radius: 3px; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.06); + color: var(--lp-accent-text); +} + +/* Mock input */ +.landing-mock-input { + display: flex; + align-items: flex-start; + gap: 8px; + padding: 12px 14px; + border-radius: 8px; + background: var(--lp-card); + border: 1px solid var(--lp-border); + font-size: 0.7rem; + color: var(--lp-text-secondary); + line-height: 1.5; + width: 100%; +} + +.landing-mock-input-icon { + font-size: 0.9rem; + flex-shrink: 0; + margin-top: -1px; +} + +/* Mock ticket */ +.landing-mock-ticket { + width: 100%; + padding: 12px 14px; + border-radius: 8px; + background: var(--lp-card); + border: 1px solid var(--lp-border); + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.landing-mock-ticket-header { + font-size: 0.65rem; + color: var(--lp-accent-text); + font-weight: 700; + padding-bottom: 0.4rem; + border-bottom: 1px solid var(--lp-border); + margin-bottom: 0.15rem; +} + +.landing-mock-ticket-line { + font-size: 0.6rem; + color: var(--lp-text-secondary); + display: flex; + gap: 6px; +} + +.landing-mock-ticket-line .time { + color: var(--lp-text-dim); + min-width: 30px; +} + +.landing-mock-ticket-line .check { + color: var(--lp-success); +} + +/* ---- PROBLEM SECTION (asymmetric) ---- */ +.landing-problem-layout { + display: grid; + grid-template-columns: 2fr 3fr; + gap: 3rem; + align-items: start; +} + +.landing-problem-headline h2 { + font-family: 'Bricolage Grotesque', sans-serif; + font-size: clamp(1.75rem, 3.5vw, 2.5rem); + font-weight: 800; + color: var(--lp-text-heading); + letter-spacing: -0.03em; + line-height: 1.15; + margin: 0 0 1rem; +} + +.landing-problem-headline > p { + font-size: 1rem; + color: var(--lp-text-secondary); + line-height: 1.7; +} + +.landing-problem-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.landing-problem-card { + padding: 1.25rem; + border-radius: 8px; + background: var(--lp-card); + border: 1px solid var(--lp-border); + transition: border-color 0.3s; +} + +.landing-problem-card:hover { + border-color: var(--lp-border-hover); +} + .landing-problem-icon { - width: 44px; - height: 44px; - border-radius: 12px; + width: 36px; + height: 36px; + border-radius: 8px; display: flex; align-items: center; justify-content: center; - margin-bottom: 1.25rem; - font-size: 1.25rem; + margin-bottom: 0.75rem; + font-size: 1.1rem; } .landing-problem-icon.red { - background: rgba(239, 68, 68, 0.1); - color: var(--color-danger); + background: rgba(248, 113, 113, 0.1); + color: var(--lp-danger); } .landing-problem-icon.amber { - background: rgba(245, 158, 11, 0.1); - color: #f59e0b; + background: rgba(251, 191, 36, 0.1); + color: var(--lp-warning); } .landing-problem-icon.slate { - background: rgba(148, 163, 184, 0.1); - color: #94a3b8; + background: rgba(145, 152, 168, 0.1); + color: var(--lp-text-secondary); } .landing-problem-icon.violet { background: rgba(139, 92, 246, 0.1); - color: #8b5cf6; + color: #a78bfa; } .landing-problem-card h3 { font-family: 'Bricolage Grotesque', sans-serif; - font-size: 1.25rem; + font-size: 0.95rem; font-weight: 700; - margin-bottom: 0.6rem; + color: var(--lp-text-heading); + margin-bottom: 0.4rem; letter-spacing: -0.01em; } .landing-problem-card p { - font-size: 0.9rem; - color: var(--color-text-secondary); - line-height: 1.65; + font-size: 0.8rem; + color: var(--lp-text-secondary); + line-height: 1.6; + margin: 0; } /* ---- EQUATION ---- */ .landing-equation-section { text-align: center; - padding: 3.5rem 2rem; - position: relative; + padding: 4rem 2rem; } -/* Removed radial gradient pseudo-element */ -.landing-equation-section::before { - display: none; +.landing-equation-inner { + max-width: 900px; + margin: 0 auto; } .landing-brand-equation { display: flex; align-items: center; justify-content: center; - gap: 1rem; + gap: 0.75rem; flex-wrap: wrap; font-family: 'Bricolage Grotesque', sans-serif; - font-size: clamp(1.5rem, 3.5vw, 2.5rem); + font-size: clamp(1.25rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.5rem; } .landing-eq-item { - padding: 0.5rem 1.25rem; - border-radius: 12px; - background: var(--color-bg-card); - border: 1px solid var(--color-border-default); + padding: 0.4rem 1rem; + border-radius: 8px; + background: var(--lp-card); + border: 1px solid var(--lp-border); + color: var(--lp-text-heading); } .landing-eq-operator { - color: var(--color-accent-text); - font-size: 2rem; + color: var(--lp-accent); + font-size: 1.5em; } .landing-eq-result { - color: var(--color-accent-text); - padding: 0; + color: var(--lp-accent-text); } -/* ---- EQUATION DESC ---- */ .landing-equation-desc { - font-size: 1.1rem; - color: var(--color-text-secondary); - max-width: 550px; + font-size: 1.05rem; + color: var(--lp-text-secondary); + max-width: 480px; margin: 0 auto; line-height: 1.7; } -/* ---- HOW IT WORKS ---- */ -.landing-steps-container { - display: grid; - grid-template-columns: repeat(3, 1fr); +/* ---- HOW IT WORKS (zigzag) ---- */ +.landing-zigzag { + max-width: 1100px; + margin: 3rem auto 0; + padding: 0 2rem; + display: flex; + flex-direction: column; gap: 2rem; - margin-top: 3.5rem; - counter-reset: landing-step; } -.landing-step-card { - padding: 2rem; - border-radius: 16px; - background: var(--color-bg-card); - border: 1px solid var(--color-border-default); - position: relative; - counter-increment: landing-step; - transition: border-color 0.3s, transform 0.3s; +.landing-zigzag-step { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: center; } -.landing-step-card:hover { - border-color: rgba(96, 165, 250, 0.2); +.landing-zigzag-step.reverse { + direction: rtl; } -.landing-step-card::before { - content: counter(landing-step, decimal-leading-zero); - font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.7rem; - font-weight: 600; - color: var(--color-accent-text); - opacity: 0.6; - letter-spacing: 0.05em; +.landing-zigzag-step.reverse > * { + direction: ltr; } -.landing-step-card h3 { +.landing-zigzag-number { font-family: 'Bricolage Grotesque', sans-serif; - font-size: 1.25rem; + font-size: 0.75rem; font-weight: 700; - margin: 1rem 0 0.75rem; - letter-spacing: -0.01em; + color: var(--lp-accent); + letter-spacing: 0.05em; + margin-bottom: 0.5rem; } -.landing-step-card p { - font-size: 0.9rem; - color: var(--color-text-secondary); - line-height: 1.65; +.landing-zigzag-text h3 { + font-family: 'Bricolage Grotesque', sans-serif; + font-size: 1.5rem; + font-weight: 700; + color: var(--lp-text-heading); + letter-spacing: -0.02em; + margin-bottom: 0.75rem; } -.landing-step-visual { - width: 100%; - height: 120px; - border-radius: 10px; - margin-top: 1.25rem; - background: var(--color-bg-page); - border: 1px solid var(--color-border-default); +.landing-zigzag-text p { + font-size: 0.95rem; + color: var(--lp-text-secondary); + line-height: 1.7; + margin: 0; +} + +.landing-zigzag-visual { + padding: 1.5rem; + border-radius: 8px; + background: var(--lp-bg); + border: 1px solid var(--lp-border); +} + +.landing-section-alt .landing-zigzag-visual { + background: var(--lp-bg-alt); +} + +/* ---- FEATURES ---- */ +.landing-feature-highlight { display: flex; - align-items: center; - justify-content: center; - overflow: hidden; + align-items: flex-start; + gap: 1.5rem; + padding: 2rem; + border-radius: 8px; + background: var(--lp-accent-soft); + border: 1px solid rgba(96, 165, 250, 0.15); + margin-top: 2.5rem; + margin-bottom: 1.5rem; } -/* Mock editor */ -.landing-mock-editor { - display: flex; - gap: 0.5rem; - padding: 0.75rem; - width: 100%; - align-items: center; -} - -.landing-mock-node { - padding: 6px 10px; - border-radius: 6px; - font-size: 0.6rem; - font-family: 'IBM Plex Sans', sans-serif; - overflow-wrap: anywhere; -} - -.landing-mock-node.start { +.landing-feature-highlight-icon { + width: 52px; + height: 52px; + border-radius: 8px; background: rgba(96, 165, 250, 0.15); - color: var(--color-accent-text); - border: 1px solid rgba(96, 165, 250, 0.2); -} - -.landing-mock-node.step { - background: rgba(255, 255, 255, 0.03); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-default); -} - -.landing-mock-connector { - width: 20px; display: flex; align-items: center; justify-content: center; - color: #5a6170; - font-size: 0.7rem; + color: var(--lp-accent); + flex-shrink: 0; } -/* Mock session */ -.landing-mock-session { - width: 100%; - padding: 0.75rem; - display: flex; - flex-direction: column; - gap: 0.35rem; +.landing-feature-highlight-content h3 { + font-family: 'Bricolage Grotesque', sans-serif; + font-size: 1.35rem; + font-weight: 700; + color: var(--lp-text-heading); + letter-spacing: -0.01em; + margin-bottom: 0.5rem; } -.landing-mock-chat-line { - display: flex; - align-items: center; - gap: 6px; - font-size: 0.6rem; - font-family: 'IBM Plex Sans', sans-serif; +.landing-feature-highlight-content p { + font-size: 0.95rem; + color: var(--lp-text-secondary); + line-height: 1.65; + margin: 0; } -.landing-mock-chat-line .label { - color: var(--color-accent-text); - font-weight: 600; - min-width: 55px; -} - -.landing-mock-chat-line .text { - color: var(--color-text-secondary); - overflow-wrap: anywhere; - min-width: 0; -} - -.landing-mock-chat-line.doc .label { - color: var(--color-success); -} - -/* Mock ticket */ -.landing-mock-ticket { - width: 100%; - padding: 0.75rem; - display: flex; - flex-direction: column; - gap: 0.35rem; -} - -.landing-mock-ticket-header { - font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.6rem; - color: var(--color-accent-text); - font-weight: 600; - padding-bottom: 0.35rem; - border-bottom: 1px solid var(--color-border-default); - margin-bottom: 0.15rem; -} - -.landing-mock-ticket-line { - font-size: 0.55rem; - font-family: 'IBM Plex Sans', sans-serif; - color: var(--color-text-secondary); - display: flex; - gap: 6px; -} - -.landing-mock-ticket-line .time { - color: #5a6170; - min-width: 35px; -} - -.landing-mock-ticket-line .check { - color: var(--color-success); -} - -/* ---- FEATURES GRID ---- */ .landing-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 1.5rem; - margin-top: 3.5rem; + gap: 1rem; } .landing-feature-card { - padding: 2rem; - border-radius: 16px; - background: var(--color-bg-card); - border: 1px solid var(--color-border-default); - transition: border-color 0.3s ease, transform 0.3s ease; + padding: 1.5rem; + border-radius: 8px; + background: var(--lp-card); + border: 1px solid var(--lp-border); + transition: border-color 0.3s; } .landing-feature-card:hover { - border-color: rgba(96, 165, 250, 0.2); - transform: translateY(-3px); + border-color: var(--lp-border-hover); } .landing-feature-icon { - width: 40px; - height: 40px; - border-radius: 10px; - background: rgba(96, 165, 250, 0.08); + width: 36px; + height: 36px; + border-radius: 8px; + background: var(--lp-accent-soft); display: flex; align-items: center; justify-content: center; - margin-bottom: 1.25rem; - color: var(--color-accent-text); + margin-bottom: 1rem; + color: var(--lp-accent-text); } .landing-feature-card h3 { font-family: 'Bricolage Grotesque', sans-serif; - font-size: 1.25rem; + font-size: 1rem; font-weight: 700; - margin-bottom: 0.6rem; + color: var(--lp-text-heading); + margin-bottom: 0.4rem; letter-spacing: -0.01em; } .landing-feature-card p { - font-size: 0.875rem; - color: var(--color-text-secondary); + font-size: 0.85rem; + color: var(--lp-text-secondary); line-height: 1.6; + margin: 0; } -.landing-feature-card.highlight { - border-color: rgba(96, 165, 250, 0.15); - background: var(--color-bg-card); - grid-column: span 2; +/* 5 cards: 3 + 2 bottom row centered */ +.landing-features-grid .landing-feature-card:nth-child(4) { + grid-column: 1 / 2; +} + +.landing-features-grid .landing-feature-card:nth-child(5) { + grid-column: 2 / 3; } /* ---- PRICING ---- */ @@ -961,110 +851,111 @@ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; - margin-top: 3.5rem; + margin-top: 3rem; align-items: start; } .landing-pricing-card { - padding: 2.5rem 2rem; - border-radius: 16px; - background: var(--color-bg-card); - border: 1px solid var(--color-border-default); - transition: border-color 0.3s, transform 0.3s; + padding: 2rem 1.75rem; + border-radius: 8px; + background: var(--lp-card); + border: 1px solid var(--lp-border); + transition: border-color 0.3s; } .landing-pricing-card:hover { - border-color: rgba(255, 255, 255, 0.12); + border-color: var(--lp-border-hover); } .landing-pricing-card.featured { - border-color: #60a5fa; - background: var(--color-bg-card); + border-color: var(--lp-accent); + padding: 2.5rem 2rem; position: relative; + box-shadow: 0 0 0 1px var(--lp-accent), 0 8px 32px rgba(96, 165, 250, 0.08); } -.landing-pricing-card.featured::before { - content: 'Most Popular'; +.landing-pricing-badge { position: absolute; - top: -12px; + top: -11px; left: 50%; transform: translateX(-50%); - padding: 4px 14px; + padding: 3px 12px; border-radius: 100px; - background: var(--color-accent); - font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.65rem; - font-weight: 600; + background: var(--lp-accent); + font-size: 0.6rem; + font-weight: 700; color: #fff; - letter-spacing: 0.05em; + letter-spacing: 0.06em; text-transform: uppercase; + white-space: nowrap; } .landing-pricing-plan-name { font-family: 'Bricolage Grotesque', sans-serif; - font-size: 1.15rem; + font-size: 1.1rem; font-weight: 700; - margin-bottom: 0.5rem; - letter-spacing: -0.01em; + color: var(--lp-text-heading); + margin-bottom: 0.35rem; } .landing-pricing-target { font-size: 0.8rem; - color: #5a6170; - margin-bottom: 1.5rem; + color: var(--lp-text-dim); + margin-bottom: 1.25rem; } .landing-pricing-price { display: flex; align-items: baseline; - gap: 0.25rem; - margin-bottom: 0.25rem; + gap: 0.2rem; + margin-bottom: 0.2rem; } .landing-pricing-price .amount { font-family: 'Bricolage Grotesque', sans-serif; - font-size: 2.75rem; + font-size: 2.5rem; font-weight: 800; + color: var(--lp-text-heading); letter-spacing: -0.04em; } .landing-pricing-card.featured .landing-pricing-price .amount { - color: var(--color-accent-text); + color: var(--lp-accent-text); } .landing-pricing-price .period { font-size: 0.85rem; - color: #5a6170; + color: var(--lp-text-dim); } .landing-pricing-note { - font-size: 0.8rem; - color: #5a6170; - margin-bottom: 2rem; + font-size: 0.75rem; + color: var(--lp-text-dim); + margin-bottom: 1.5rem; } .landing-pricing-features { list-style: none; display: flex; flex-direction: column; - gap: 0.75rem; - margin-bottom: 2rem; + gap: 0.6rem; + margin-bottom: 1.75rem; padding: 0; } .landing-pricing-features li { - font-size: 0.875rem; - color: var(--color-text-secondary); + font-size: 0.85rem; + color: var(--lp-text-secondary); display: flex; align-items: flex-start; - gap: 0.6rem; + gap: 0.5rem; } .landing-pricing-features li::before { content: '\2713'; - color: #60a5fa; + color: var(--lp-accent); font-weight: 700; - font-size: 0.8rem; + font-size: 0.75rem; margin-top: 2px; flex-shrink: 0; } @@ -1072,9 +963,9 @@ .landing-pricing-btn { display: block; text-align: center; - padding: 0.75rem 1.5rem; - border-radius: 10px; - font-size: 0.9rem; + padding: 0.7rem 1.25rem; + border-radius: 8px; + font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: opacity 0.3s, border-color 0.3s, background 0.3s, transform 0.3s; @@ -1082,19 +973,19 @@ } .landing-pricing-btn.outline { - color: var(--color-text-primary); - border: 1px solid var(--color-border-default); + color: var(--lp-text-heading); + border: 1px solid var(--lp-border); background: transparent; } .landing-pricing-btn.outline:hover { - background: rgba(255, 255, 255, 0.06); - border-color: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); + border-color: var(--lp-border-hover); } .landing-pricing-btn.filled { color: #fff; - background: var(--color-accent); + background: var(--lp-btn); border: none; } @@ -1103,15 +994,23 @@ transform: translateY(-1px); } +.landing-pricing-session-note { + text-align: center; + margin-top: 1.5rem; + font-size: 0.8rem; + color: var(--lp-text-dim); + font-style: italic; +} + .landing-pricing-enterprise { text-align: center; - margin-top: 2rem; + margin-top: 0.75rem; font-size: 0.85rem; - color: #5a6170; + color: var(--lp-text-dim); } .landing-pricing-enterprise a { - color: var(--color-accent-text); + color: var(--lp-accent-text); text-decoration: none; } @@ -1119,140 +1018,190 @@ text-decoration: underline; } -/* ---- TESTIMONIAL ---- */ -.landing-testimonial-section { +/* ---- FAQ ---- */ +.landing-faq-list { + max-width: 680px; + margin-top: 2rem; +} + +.landing-faq-item { + border-bottom: 1px solid var(--lp-border); +} + +.landing-faq-item:first-child { + border-top: 1px solid var(--lp-border); +} + +.landing-faq-trigger { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 1.25rem 0; + background: none; + border: none; + cursor: pointer; + text-align: left; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 1rem; + font-weight: 600; + color: var(--lp-text-heading); + gap: 1rem; + transition: color 0.2s; +} + +.landing-faq-trigger:hover { + color: var(--lp-accent-text); +} + +.landing-faq-icon { + font-size: 1.25rem; + color: var(--lp-text-dim); + flex-shrink: 0; + width: 24px; text-align: center; - max-width: 700px; - margin: 0 auto; - padding: 3.5rem 2rem; + transition: color 0.2s; } -.landing-testimonial-quote { - font-family: 'Bricolage Grotesque', sans-serif; - font-size: 1.5rem; - font-weight: 600; - line-height: 1.5; - letter-spacing: -0.01em; - color: var(--color-text-primary); - font-style: italic; - margin-bottom: 1.5rem; - position: relative; +.landing-faq-item.open .landing-faq-icon { + color: var(--lp-accent); } -.landing-testimonial-quote::before { - content: '\201C'; - font-size: 4rem; - color: #60a5fa; - opacity: 0.3; - vertical-align: super; - margin-right: 1rem; - top: -2.5rem; - font-family: 'Bricolage Grotesque', sans-serif; - line-height: 1; +/* Smooth height animation via grid-template-rows */ +.landing-faq-answer { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.3s ease; } -.landing-testimonial-quote::after { - content: '\201D'; - font-size: 4rem; - color: #60a5fa; - opacity: 0.3; - vertical-align: sub; - margin-left: 1rem; - font-family: 'Bricolage Grotesque', sans-serif; - line-height: 1; - position: absolute; - bottom: -2.5rem; +.landing-faq-item.open .landing-faq-answer { + grid-template-rows: 1fr; } -.landing-testimonial-author { +.landing-faq-answer > p { + overflow: hidden; + margin: 0; font-size: 0.9rem; - color: #5a6170; + color: var(--lp-text-secondary); + line-height: 1.7; + padding: 0 0 1.25rem; } -.landing-testimonial-author strong { - color: var(--color-text-secondary); - font-weight: 600; +/* ---- FOUNDER ---- */ +.landing-founder-section { + padding: 4rem 2rem; +} + +.landing-founder-inner { + max-width: 640px; + margin: 0 auto; +} + +.landing-founder-section blockquote { + font-family: 'Bricolage Grotesque', sans-serif; + font-size: 1.25rem; + font-weight: 500; + line-height: 1.6; + color: var(--lp-text-body); + margin: 0.75rem 0 1.25rem; + padding-left: 1.25rem; + border-left: 3px solid var(--lp-accent); +} + +.landing-founder-name { + font-size: 0.85rem; + color: var(--lp-text-dim); + padding-left: 1.25rem; } /* ---- CTA ---- */ .landing-cta-section { text-align: center; - padding: 4rem 2rem; - position: relative; + padding: 5rem 2rem; + background: var(--lp-bg-alt); } -/* Removed radial gradient pseudo-element */ -.landing-cta-section::before { - display: none; +.landing-cta-inner { + max-width: 520px; + margin: 0 auto; } .landing-cta-section h2 { font-family: 'Bricolage Grotesque', sans-serif; - font-size: clamp(2rem, 4vw, 2.75rem); + font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; + color: var(--lp-text-heading); letter-spacing: -0.03em; - margin-bottom: 1rem; + margin-bottom: 0.75rem; } -.landing-cta-section>p { - font-size: 1.1rem; - color: var(--color-text-secondary); - max-width: 500px; - margin: 0 auto 2rem; +.landing-cta-section h2 + p { + font-size: 1rem; + color: var(--lp-text-secondary); + margin-bottom: 2rem; line-height: 1.7; } .landing-cta-email-form { + display: flex; + flex-direction: column; + gap: 0; +} + +.landing-cta-input-wrap { display: flex; gap: 0.75rem; - max-width: 440px; - margin: 0 auto; } .landing-cta-email-input { flex: 1; - padding: 0.85rem 1.25rem; - border-radius: 10px; - border: 1px solid var(--color-border-default); - background: var(--color-bg-card); - color: var(--color-text-primary); + padding: 0.8rem 1rem; + border-radius: 8px; + border: 1px solid var(--lp-border); + background: var(--lp-card); + color: var(--lp-text-heading); font-family: 'IBM Plex Sans', sans-serif; font-size: 0.9rem; outline: none; - transition: border-color 0.3s; + transition: border-color 0.3s, box-shadow 0.3s; } .landing-cta-email-input::placeholder { - color: #5a6170; + color: var(--lp-text-dim); } .landing-cta-email-input:focus { - border-color: #60a5fa; + border-color: var(--lp-accent); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1); } -.landing-cta-fine-print { - font-size: 0.75rem; - color: #5a6170; - margin-top: 1rem; +.landing-cta-status { + min-height: 1.5rem; + margin-top: 0.5rem; } .landing-cta-success { font-size: 0.85rem; - color: var(--color-success); - margin-top: 0.75rem; + color: var(--lp-success); + margin: 0; } .landing-cta-error { font-size: 0.85rem; - color: var(--color-danger); + color: var(--lp-danger); + margin: 0; +} + +.landing-cta-fine-print { + font-size: 0.7rem; + color: var(--lp-text-dim); margin-top: 0.75rem; } /* ---- FOOTER ---- */ .landing-footer { - border-top: 1px solid var(--color-border-default); - padding: 3rem 2rem; + border-top: 1px solid var(--lp-border); + padding: 2.5rem 2rem; } .landing-footer-inner { @@ -1272,8 +1221,8 @@ } .landing-footer-copy { - font-size: 0.8rem; - color: #5a6170; + font-size: 0.75rem; + color: var(--lp-text-dim); } .landing-footer-links { @@ -1285,39 +1234,99 @@ } .landing-footer-links a { - font-size: 0.8rem; - color: #5a6170; + font-size: 0.75rem; + color: var(--lp-text-dim); text-decoration: none; transition: color 0.2s; } .landing-footer-links a:hover { - color: var(--color-text-secondary); + color: var(--lp-text-secondary); } /* ---- ANIMATIONS ---- */ @keyframes landingFadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } } -@keyframes landingFadeInDown { - from { - opacity: 0; - transform: translateY(-12px); - } +@keyframes landingPreviewEntrance { + from { opacity: 0; transform: translateY(30px) scale(0.97); } + to { opacity: 1; transform: translateY(0) scale(1); } +} - to { - opacity: 1; - transform: translateY(0); - } +/* ---- CHAT ANIMATION ---- */ +.landing-chat-animated { + opacity: 0; + transform: translateX(-16px); + animation: landingChatSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; + animation-delay: calc(1.5s + var(--chat-index, 0) * 1.2s); +} + +.landing-chat-animated:nth-child(2) { + animation: landingTypingLifecycle 3s ease both; + animation-delay: 2.7s; +} + +.landing-chat-animated:nth-child(3) { animation-delay: 5.7s; } +.landing-chat-animated:nth-child(4) { animation-delay: 6.7s; } +.landing-chat-animated:nth-child(5) { animation-delay: 7.7s; } +.landing-chat-animated:nth-child(6) { animation-delay: 9s; } + +@keyframes landingChatSlideIn { + from { opacity: 0; transform: translateX(-16px); } + to { opacity: 1; transform: translateX(0); } +} + +@keyframes landingTypingLifecycle { + 0% { opacity: 0; transform: translateX(-16px); } + 10% { opacity: 1; transform: translateX(0); } + 75% { opacity: 1; transform: translateX(0); } + 90% { opacity: 0; transform: translateX(0); } + 100% { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; } +} + +.landing-typing-indicator { + display: flex; + align-items: center; + gap: 5px; + padding: 6px 10px; + border-radius: 6px; + background: var(--lp-accent-soft); + border: 1px solid rgba(96, 165, 250, 0.1); + width: fit-content; +} + +.landing-typing-indicator span { + display: block; + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--lp-accent); + opacity: 0.5; + animation: landingTypingBounce 1s ease-in-out infinite; +} + +.landing-typing-indicator span:nth-child(2) { animation-delay: 0.15s; } +.landing-typing-indicator span:nth-child(3) { animation-delay: 0.3s; } + +.landing-typing-label { + font-size: 0.6rem; + color: var(--lp-accent); + font-weight: 500; + white-space: nowrap; + /* Override dot styles */ + width: auto !important; + height: auto !important; + border-radius: 0 !important; + background: transparent !important; + opacity: 1 !important; + animation: none !important; +} + +@keyframes landingTypingBounce { + 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } + 30% { transform: translateY(-4px); opacity: 1; } } /* ---- SCROLL REVEAL ---- */ @@ -1332,7 +1341,75 @@ transform: translateY(0); } -/* ---- Hamburger Button ---- */ +/* ---- Scroll-driven enhancements ---- */ +@supports (animation-timeline: scroll()) { + .landing-reveal { + opacity: 0; + transform: translateY(32px); + animation: landingScrollReveal linear both; + animation-timeline: view(); + animation-range: entry 0% entry 35%; + transition: none; + } + + .landing-reveal.visible { + /* scroll-driven handles it */ + } + + @keyframes landingScrollReveal { + from { opacity: 0; transform: translateY(32px); } + to { opacity: 1; transform: translateY(0); } + } + + .landing-problem-card { + opacity: 0; + transform: translateY(16px); + animation: landingScrollReveal linear both; + animation-timeline: view(); + animation-range: entry 0% entry 40%; + } + + .landing-problem-card:nth-child(1) { animation-range: entry 0% entry 35%; } + .landing-problem-card:nth-child(2) { animation-range: entry 5% entry 40%; } + .landing-problem-card:nth-child(3) { animation-range: entry 10% entry 45%; } + .landing-problem-card:nth-child(4) { animation-range: entry 15% entry 50%; } + + .landing-feature-card { + opacity: 0; + transform: translateY(16px); + animation: landingScrollReveal linear both; + animation-timeline: view(); + animation-range: entry 0% entry 40%; + } + + .landing-feature-card:nth-child(1) { animation-range: entry 0% entry 30%; } + .landing-feature-card:nth-child(2) { animation-range: entry 3% entry 33%; } + .landing-feature-card:nth-child(3) { animation-range: entry 6% entry 36%; } + .landing-feature-card:nth-child(4) { animation-range: entry 9% entry 39%; } + .landing-feature-card:nth-child(5) { animation-range: entry 12% entry 42%; } + + .landing-pricing-card { + opacity: 0; + transform: translateY(16px); + animation: landingScrollReveal linear both; + animation-timeline: view(); + animation-range: entry 0% entry 40%; + } + + .landing-pricing-card:nth-child(1) { animation-range: entry 0% entry 30%; } + .landing-pricing-card:nth-child(2) { animation-range: entry 5% entry 35%; } + .landing-pricing-card:nth-child(3) { animation-range: entry 10% entry 40%; } + + .landing-zigzag-step { + opacity: 0; + transform: translateY(20px); + animation: landingScrollReveal linear both; + animation-timeline: view(); + animation-range: entry 0% entry 35%; + } +} + +/* ---- HAMBURGER ---- */ .landing-hamburger { display: none; flex-direction: column; @@ -1351,13 +1428,13 @@ display: block; width: 22px; height: 2px; - background: #848b9b; + background: var(--lp-text-secondary); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .landing-hamburger:hover span { - background: #e2e5eb; + background: var(--lp-text-heading); } .landing-hamburger.open span:nth-child(1) { @@ -1372,14 +1449,14 @@ transform: translateY(-7px) rotate(-45deg); } -/* ---- Mobile Menu ---- */ +/* ---- MOBILE MENU ---- */ .landing-mobile-menu { display: none; flex-direction: column; gap: 0; padding: 0.5rem 1.5rem 1.5rem; - background: rgba(12, 13, 16, 0.98); - border-bottom: 1px solid var(--color-border-default); + background: rgba(20, 22, 29, 0.98); + border-bottom: 1px solid var(--lp-border); } .landing-mobile-menu a { @@ -1387,14 +1464,14 @@ padding: 0.875rem 0; font-size: 1rem; font-weight: 500; - color: var(--color-text-secondary); + color: var(--lp-text-secondary); text-decoration: none; transition: color 0.2s; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .landing-mobile-menu a:hover { - color: var(--color-text-primary); + color: var(--lp-text-heading); } .landing-mobile-menu a:last-child { @@ -1414,28 +1491,81 @@ /* ---- RESPONSIVE ---- */ @media (max-width: 900px) { - - .landing-page section { - padding: 3rem 1rem; + .landing-section { + padding: 3.5rem 1.25rem; } - .landing-section-inner { + .landing-hero { + padding: 7rem 1.25rem 3rem; + } + + .landing-hero-inner { + grid-template-columns: 1fr; + gap: 2.5rem; + } + + .landing-hero h1 { + font-size: 2.25rem; + } + + .landing-hero-sub { max-width: 100%; } - .landing-step-card { - padding: 1.25rem; + .landing-hero-actions { + flex-wrap: wrap; } - .landing-problem-grid, - .landing-steps-container, - .landing-features-grid, - .landing-pricing-grid { + .landing-problem-layout { + grid-template-columns: 1fr; + gap: 2rem; + } + + .landing-problem-grid { grid-template-columns: 1fr; } - .landing-feature-card.highlight { - grid-column: span 1; + .landing-zigzag { + padding: 0 1.25rem; + } + + .landing-zigzag-step, + .landing-zigzag-step.reverse { + grid-template-columns: 1fr; + direction: ltr; + gap: 1.5rem; + } + + .landing-zigzag-step.reverse > * { + direction: ltr; + } + + .landing-zigzag-visual { + order: 2; + } + + .landing-features-grid { + grid-template-columns: 1fr; + } + + .landing-features-grid .landing-feature-card:nth-child(4), + .landing-features-grid .landing-feature-card:nth-child(5) { + grid-column: auto; + } + + .landing-feature-highlight { + flex-direction: column; + gap: 1rem; + padding: 1.5rem; + } + + .landing-pricing-grid { + grid-template-columns: 1fr; + max-width: 400px; + } + + .landing-pricing-card.featured { + order: -1; } .landing-nav-links { @@ -1454,290 +1584,42 @@ display: flex; } - .landing-preview-sidebar { - display: none; - } - - .landing-preview-url-bar { - display: none; - } - - .landing-preview-window-controls { - display: none; - } - - .landing-preview-titlebar { - justify-content: center; - } - - .landing-tree-branch { - gap: 1rem; - } - - .landing-hero { - padding: 8rem 1.5rem 4rem; - } - .landing-equation-section { - padding: 3rem 1rem; + padding: 3rem 1.25rem; } .landing-brand-equation { - font-size: 1.25rem; - gap: 0.5rem; - flex-wrap: wrap; + font-size: 1.1rem; + gap: 0.4rem; } .landing-eq-item { - padding: 0.35rem 0.75rem; + padding: 0.3rem 0.6rem; } - .landing-testimonial-section { - padding: 3rem 1rem; + .landing-founder-section { + padding: 3rem 1.25rem; } .landing-cta-section { - padding: 3rem 1rem; + padding: 3.5rem 1.25rem; } - .landing-cta-email-form { + .landing-cta-input-wrap { flex-direction: column; } -} -/* ============================================ - OVERDRIVE: Live Chat Animation + Scroll Enhancements - ============================================ */ - -/* ── A) ANIMATED CHAT MESSAGES ── */ -/* Deliberate, watchable conversation sequence. - User types → thinking → AI responds line by line → doc confirmation */ - -.landing-chat-animated { - opacity: 0; - transform: translateX(-20px); - animation: landingChatSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; - /* Slower stagger: 1.2s per message so each line is clearly individual. - Base delay 2s (after hero + preview entrance). */ - animation-delay: calc(2s + var(--chat-index, 0) * 1.2s); -} - -/* The typing indicator (index 1) has its own lifecycle: appear → hold → collapse */ -.landing-chat-animated:nth-child(2) { - animation: landingTypingLifecycle 3s ease both; - animation-delay: 3.2s; /* appears after user message */ -} - -/* AI responses start after typing indicator finishes (3.2s + 3s = 6.2s) */ -.landing-chat-animated:nth-child(3) { animation-delay: 6.2s; } -.landing-chat-animated:nth-child(4) { animation-delay: 7.2s; } -.landing-chat-animated:nth-child(5) { animation-delay: 8.2s; } -/* Doc confirmation comes last with extra pause */ -.landing-chat-animated:nth-child(6) { animation-delay: 9.6s; } - -@keyframes landingChatSlideIn { - from { - opacity: 0; - transform: translateX(-20px); - } - to { - opacity: 1; - transform: translateX(0); + .landing-faq-trigger { + font-size: 0.9rem; + padding: 1rem 0; } } -@keyframes landingTypingLifecycle { - 0% { opacity: 0; transform: translateX(-20px); } - 10% { opacity: 1; transform: translateX(0); } - 75% { opacity: 1; transform: translateX(0); } - 90% { opacity: 0; transform: translateX(0); } - 100% { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; } -} - -/* ── Typing indicator dots — bigger, with label ── */ -.landing-typing-indicator { - display: flex; - align-items: center; - gap: 6px; - padding: 6px 10px; - border-radius: 8px; - background: rgba(96, 165, 250, 0.06); - border: 1px solid rgba(96, 165, 250, 0.1); - width: fit-content; -} - -.landing-typing-indicator span { - display: block; - width: 6px; - height: 6px; - border-radius: 50%; - background: #60a5fa; - opacity: 0.5; - animation: landingTypingBounce 1s ease-in-out infinite; -} - -.landing-typing-indicator span:nth-child(2) { - animation-delay: 0.15s; -} - -.landing-typing-indicator span:nth-child(3) { - animation-delay: 0.3s; -} - -/* The label text span — no bounce animation */ -.landing-typing-indicator span:nth-child(4) { - width: auto; - height: auto; - border-radius: 0; - background: transparent; - opacity: 1; - animation: none; -} - -@keyframes landingTypingBounce { - 0%, 60%, 100% { - transform: translateY(0); - opacity: 0.4; - } - 30% { - transform: translateY(-5px); - opacity: 1; - } -} - -/* ── App preview cinematic entrance ── */ -.landing-app-preview { - animation: landingPreviewEntrance 1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; -} - -@keyframes landingPreviewEntrance { - from { - opacity: 0; - transform: translateY(40px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* ── Sidebar items stagger in with slide ── */ -.landing-preview-sidebar-item { - opacity: 0; - animation: landingChatSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; -} - -.landing-preview-sidebar-item:nth-child(1) { animation-delay: 1.2s; } -.landing-preview-sidebar-item:nth-child(2) { animation-delay: 1.35s; } -.landing-preview-sidebar-item:nth-child(3) { animation-delay: 1.5s; } -.landing-preview-sidebar-item:nth-child(4) { animation-delay: 1.65s; } -.landing-preview-sidebar-item:nth-child(5) { animation-delay: 1.8s; } - -/* ── B) SCROLL-DRIVEN ENHANCEMENTS ── */ -/* Upgrade the basic reveal to use scroll-driven parallax where supported */ - -@supports (animation-timeline: scroll()) { - /* Sections get a subtle parallax lift as they enter viewport */ - .landing-reveal { - opacity: 0; - transform: translateY(40px); - animation: landingScrollReveal linear both; - animation-timeline: view(); - animation-range: entry 0% entry 40%; - /* Override the JS-based transition approach */ - transition: none; - } - - /* No need for the JS .visible class when scroll-driven is available */ - .landing-reveal.visible { - /* Intentionally blank — scroll-driven animation handles it */ - } - - @keyframes landingScrollReveal { - from { - opacity: 0; - transform: translateY(40px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - /* Problem cards stagger within their parent */ - .landing-problem-card { - opacity: 0; - transform: translateY(20px); - animation: landingScrollReveal linear both; - animation-timeline: view(); - animation-range: entry 0% entry 50%; - } - - .landing-problem-card:nth-child(1) { animation-range: entry 0% entry 40%; } - .landing-problem-card:nth-child(2) { animation-range: entry 5% entry 45%; } - .landing-problem-card:nth-child(3) { animation-range: entry 10% entry 50%; } - .landing-problem-card:nth-child(4) { animation-range: entry 15% entry 55%; } - - /* Feature cards stagger */ - .landing-feature-card { - opacity: 0; - transform: translateY(20px); - animation: landingScrollReveal linear both; - animation-timeline: view(); - animation-range: entry 0% entry 45%; - } - - .landing-feature-card:nth-child(1) { animation-range: entry 0% entry 35%; } - .landing-feature-card:nth-child(2) { animation-range: entry 3% entry 38%; } - .landing-feature-card:nth-child(3) { animation-range: entry 6% entry 41%; } - .landing-feature-card:nth-child(4) { animation-range: entry 9% entry 44%; } - .landing-feature-card:nth-child(5) { animation-range: entry 12% entry 47%; } - .landing-feature-card:nth-child(6) { animation-range: entry 15% entry 50%; } - - /* Pricing cards stagger */ - .landing-pricing-card { - opacity: 0; - transform: translateY(20px); - animation: landingScrollReveal linear both; - animation-timeline: view(); - animation-range: entry 0% entry 45%; - } - - .landing-pricing-card:nth-child(1) { animation-range: entry 0% entry 35%; } - .landing-pricing-card:nth-child(2) { animation-range: entry 5% entry 40%; } - .landing-pricing-card:nth-child(3) { animation-range: entry 10% entry 45%; } - - /* How it works steps stagger */ - .landing-step-card { - opacity: 0; - transform: translateY(20px); - animation: landingScrollReveal linear both; - animation-timeline: view(); - animation-range: entry 0% entry 45%; - } - - .landing-step-card:nth-child(1) { animation-range: entry 0% entry 35%; } - .landing-step-card:nth-child(2) { animation-range: entry 5% entry 40%; } - .landing-step-card:nth-child(3) { animation-range: entry 10% entry 45%; } - - /* Social proof bar parallax — slight upward drift */ - .landing-social-proof-bar { - animation: landingParallaxUp linear both; - animation-timeline: view(); - animation-range: entry 0% exit 100%; - } - - @keyframes landingParallaxUp { - from { transform: translateY(12px); } - to { transform: translateY(-12px); } - } -} - -/* ── REDUCED MOTION ── */ +/* ---- REDUCED MOTION ---- */ @media (prefers-reduced-motion: reduce) { .landing-chat-animated, - .landing-preview-sidebar-item, - .landing-app-preview { + .landing-hero-visual, + .landing-hero-content { opacity: 1; transform: none; animation: none; @@ -1748,8 +1630,17 @@ opacity: 0.6; } - /* Hide typing indicator entirely in reduced motion */ .landing-chat-animated:nth-child(2) { display: none; } -} \ No newline at end of file + + .landing-reveal { + opacity: 1; + transform: none; + transition: none; + } + + .landing-faq-answer { + transition: none; + } +}