diff --git a/docs/ResolutionFlow-Landing-Page.docx b/docs/ResolutionFlow-Landing-Page.docx new file mode 100644 index 00000000..abb4dc6e Binary files /dev/null and b/docs/ResolutionFlow-Landing-Page.docx differ diff --git a/docs/ResolutionFlow_Script_Generator_Plan.docx b/docs/ResolutionFlow_Script_Generator_Plan.docx new file mode 100644 index 00000000..16c24dab Binary files /dev/null and b/docs/ResolutionFlow_Script_Generator_Plan.docx differ diff --git a/docs/generate_landing_docx.py b/docs/generate_landing_docx.py new file mode 100644 index 00000000..40050995 --- /dev/null +++ b/docs/generate_landing_docx.py @@ -0,0 +1,228 @@ +"""Generate a .docx version of the ResolutionFlow landing page content.""" +from docx import Document +from docx.shared import Pt, RGBColor +from docx.enum.text import WD_ALIGN_PARAGRAPH +import os + +doc = Document() + +style = doc.styles['Normal'] +style.font.name = 'Calibri' +style.font.size = Pt(11) +style.font.color.rgb = RGBColor(0x33, 0x33, 0x33) + +for level in range(1, 4): + hs = doc.styles[f'Heading {level}'] + hs.font.color.rgb = RGBColor(0x10, 0x11, 0x14) + +# ── Title ── +title = doc.add_heading('ResolutionFlow', level=0) +title.alignment = WD_ALIGN_PARAGRAPH.CENTER +subtitle = doc.add_paragraph('From Issue to Resolution, Documented') +subtitle.alignment = WD_ALIGN_PARAGRAPH.CENTER +subtitle.runs[0].font.size = Pt(14) +subtitle.runs[0].font.color.rgb = RGBColor(0x06, 0xB6, 0xD4) + +doc.add_paragraph('AI-guided decision trees that walk your engineers through troubleshooting and automatically document every step.').alignment = WD_ALIGN_PARAGRAPH.CENTER +doc.add_paragraph('') + +# ── Hero ── +doc.add_heading('Stop writing ticket notes. Start generating them.', level=1) +doc.add_paragraph( + 'AI-guided decision trees that walk your engineers through troubleshooting — ' + 'and automatically document every step, ready for your PSA ticket.' +) + +# ── Social Proof ── +doc.add_paragraph('') +p = doc.add_paragraph() +p.alignment = WD_ALIGN_PARAGRAPH.CENTER +run = p.add_run('Built by MSP engineers, for MSP engineers') +run.bold = True +run.font.size = Pt(12) + +stats = doc.add_table(rows=1, cols=3) +stats.alignment = WD_ALIGN_PARAGRAPH.CENTER +for i, (num, label) in enumerate([ + ('15+', 'Years MSP Experience'), + ('70%', 'Less Time on Documentation'), + ('0', 'Ticket Notes Written by Hand'), +]): + cell = stats.cell(0, i) + p = cell.paragraphs[0] + p.alignment = WD_ALIGN_PARAGRAPH.CENTER + run = p.add_run(num) + run.bold = True + run.font.size = Pt(16) + run.font.color.rgb = RGBColor(0x06, 0xB6, 0xD4) + p.add_run('\n' + label).font.size = Pt(9) + +doc.add_paragraph('') + +# ── The Problem ── +doc.add_heading('The Problem', level=1) +doc.add_paragraph('Documentation is broken. Everyone knows it.') +doc.add_paragraph( + "Engineers don't want to write it. Managers hate chasing it. " + "Clients never see it. The same issues get solved from scratch every time." +) + +problems = [ + ('15-25 min lost per ticket', + 'Engineers spend more time documenting what they did than actually doing it. ' + 'After a complex issue, writing notes is the last thing anyone wants to do.'), + ('Vague, useless notes', + '"Fixed Outlook" tells you nothing. Documentation written under pressure tends ' + 'toward generalities that help nobody the second time around.'), + ('Knowledge walks out the door', + 'When a senior engineer leaves, years of tribal knowledge disappear overnight. ' + 'New hires spend months building up what was never captured.'), + ('Context switching kills speed', + 'Jumping between the issue, documentation tools, PSA tickets, and knowledge bases ' + 'fragments focus and slows resolution.'), +] +for title_text, desc in problems: + p = doc.add_paragraph() + run = p.add_run(title_text) + run.bold = True + p.add_run(f' -- {desc}') + +doc.add_paragraph('') + +# ── The Answer ── +doc.add_heading('The Answer', level=1) +p = doc.add_paragraph() +p.alignment = WD_ALIGN_PARAGRAPH.CENTER +run = p.add_run('Resolution + Documentation - Time = ResolutionFlow') +run.bold = True +run.font.size = Pt(14) +run.font.color.rgb = RGBColor(0x06, 0xB6, 0xD4) + +doc.add_paragraph( + 'What if documentation was a byproduct of solving the issue -- not a separate task? ' + 'What if your engineers never had to write another ticket note?' +) + +doc.add_paragraph('') + +# ── How It Works ── +doc.add_heading('How It Works', level=1) +doc.add_paragraph('Three steps. Zero note-writing.') +doc.add_paragraph('Build once, run forever. Every session generates documentation automatically.') + +steps = [ + ('1. Build a Flow', + 'Use the visual Flow Editor to create branching decision trees for any troubleshooting scenario. ' + 'Drag, connect, and enrich steps with commands, notes, and AI suggestions.'), + ('2. Run a Session', + 'An engineer launches the flow on a live ticket. FlowPilot -- your AI copilot -- acts as a virtual ' + 'senior engineer, guiding decisions and capturing every action in real time.'), + ('3. Export to Ticket', + 'When the session ends, full documentation is generated -- formatted for your PSA. Paste it directly ' + 'into ConnectWise, Atera, or Syncro. Done.'), +] +for step_title, step_desc in steps: + doc.add_heading(step_title, level=2) + doc.add_paragraph(step_desc) + +doc.add_paragraph('') + +# ── Features ── +doc.add_heading('Features', level=1) +doc.add_paragraph('Everything your team needs to resolve faster and document better.') + +features = [ + ('FlowPilot -- Your AI Copilot', + 'Like having a senior engineer on every call. FlowPilot suggests next steps, provides context-aware ' + 'guidance, and automatically captures documentation as a byproduct of the troubleshooting session.'), + ('Visual Flow Editor', + 'Build branching decision trees with a drag-and-drop canvas. Add steps, conditions, commands, and notes -- no code required.'), + ('Auto-Documentation', + 'Every session generates timestamped, detailed notes -- formatted for your PSA. Engineers never write another ticket note.'), + ('Team Knowledge Sharing', + 'Share flows across your team. When one engineer solves a new problem, the whole team benefits from that path -- instantly.'), + ('Session History & Analytics', + 'Track which flows are used most, identify bottlenecks, and see how your team resolves issues over time.'), + ('PSA Integration', + 'Connect directly to ConnectWise, Atera, and Syncro. Export session docs straight to tickets -- no copy-paste needed.'), +] +for feat_title, feat_desc in features: + p = doc.add_paragraph() + run = p.add_run(feat_title) + run.bold = True + p.add_run(f' -- {feat_desc}') + +doc.add_paragraph('') + +# ── Pricing ── +doc.add_heading('Pricing', level=1) +doc.add_paragraph('Simple pricing. No surprises. Start free. Upgrade when your team is ready.') + +pricing_table = doc.add_table(rows=9, cols=4) +pricing_table.style = 'Light Grid Accent 1' + +headers = ['', 'Free', 'Pro', 'Team'] +for i, h in enumerate(headers): + cell = pricing_table.cell(0, i) + cell.text = h + for run in cell.paragraphs[0].runs: + run.bold = True + +rows_data = [ + ['Target', 'Individual techs evaluating', 'Small MSPs (1-5 techs)', 'Growing MSPs (5-25 techs)'], + ['Price', '$0 -- Free forever', '$15/user/mo', '$25/user/mo'], + ['Decision Trees', '3', 'Unlimited', 'Unlimited'], + ['Sessions', '20/month', 'Unlimited', 'Unlimited'], + ['FlowPilot AI', '--', 'Included', 'Included'], + ['Exports', 'MD, TXT', 'All formats', 'All formats'], + ['PSA Integration', '--', '--', 'ConnectWise, Atera, Syncro'], + ['Support', 'Community', 'Priority', 'Dedicated'], +] +for row_idx, row_data in enumerate(rows_data): + for col_idx, val in enumerate(row_data): + pricing_table.cell(row_idx + 1, col_idx).text = val + +doc.add_paragraph('') +p = doc.add_paragraph('Need Enterprise (25+ techs, SSO, custom branding)? Contact us at ') +run = p.add_run('hello@resolutionflow.com') +run.font.color.rgb = RGBColor(0x06, 0xB6, 0xD4) + +doc.add_paragraph('') + +# ── Testimonial ── +doc.add_heading('What People Are Saying', level=1) +p = doc.add_paragraph() +run = p.add_run( + '"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."' +) +run.italic = True +run.font.size = Pt(12) +doc.add_paragraph('-- Beta Tester, MSP Engineer, Southeast US') + +doc.add_paragraph('') + +# ── CTA ── +doc.add_heading('Ready to stop writing ticket notes?', level=1) +doc.add_paragraph( + 'Join the beta and see what happens when documentation becomes automatic.\n' + 'Free to start. No credit card required.' +) +p = doc.add_paragraph() +run = p.add_run('Sign up at resolutionflow.com') +run.bold = True +run.font.color.rgb = RGBColor(0x06, 0xB6, 0xD4) + +doc.add_paragraph('') + +# ── Footer ── +p = doc.add_paragraph() +p.alignment = WD_ALIGN_PARAGRAPH.CENTER +run = p.add_run('\u00a9 2026 ResolutionFlow. All rights reserved.') +run.font.size = Pt(9) +run.font.color.rgb = RGBColor(0x88, 0x91, 0xA0) + +# Save +out_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'ResolutionFlow-Landing-Page.docx') +doc.save(out_path) +print(f'Saved to {out_path}') diff --git a/docs/resolutionflow-landing-page-mockup.html b/docs/resolutionflow-landing-page-mockup.html new file mode 100644 index 00000000..51e47059 --- /dev/null +++ b/docs/resolutionflow-landing-page-mockup.html @@ -0,0 +1,1639 @@ + + + + + +ResolutionFlow — From Issue to Resolution, Documented + + + + + + +
+
+ +
+ + + + + +
+
Now in Beta — Join early access
+

+ Stop writing ticket notes.
+ Start generating them. +

+

+ AI-guided decision trees that walk your engineers through troubleshooting — and automatically document every step, ready for your PSA ticket. +

+ +
+ + +
+

Built by MSP engineers, for MSP engineers

+
+
+
15+
+
Years MSP Experience
+
+
+
70%
+
Less Time on Documentation
+
+
+
0
+
Ticket Notes Written by Hand
+
+
+
+ + +
+
+
+
+
+ ResolutionFlow + +
+
+
+ 🔒 + app.resolutionflow.com/editor +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ Flow Editor +
+
+
+ Session Runner +
+
+
+ Tree Library +
+
+
+ Session History +
+
+
+ Team Analytics +
+
+
+
+
Outlook Not Syncing
+
+
+
+
Yes
+
+
Check profile config
+
+
+
No
+
+
Verify credentials
+
+
+
+
+
+
+
+ +
+
+ + +
+
+ +
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. +
+
+
+
+

15–25 min lost per ticket

+

Engineers spend more time documenting what they did than actually doing it. After a complex issue, writing notes is the last thing anyone wants to do.

+
+
+
📋
+

Vague, useless notes

+

"Fixed Outlook" tells you nothing. Documentation written under pressure tends toward generalities that help nobody the second time around.

+
+
+
🔄
+

Knowledge walks out the door

+

When a senior engineer leaves, years of tribal knowledge disappear overnight. New hires spend months building up what was never captured.

+
+
+
🧠
+

Context switching kills speed

+

Jumping between the issue, documentation tools, PSA tickets, and knowledge bases fragments focus and slows resolution.

+
+
+
+
+ +
+ + +
+ +
+ Resolution + + + Documentation + + Time + = + ResolutionFlow +
+

+ What if documentation was a byproduct of solving the issue — not a separate task? What if your engineers never had to write another ticket note? +

+
+ +
+ + +
+
+ +
Three steps. Zero note-writing.
+
+ Build once, run forever. Every session generates documentation automatically. +
+
+ +
+

Build a Flow

+

Use the visual Flow Editor to create branching decision trees for any troubleshooting scenario. Drag, connect, and enrich steps with commands, notes, and AI suggestions.

+
+
+
▶ Start
+
+
Check DNS
+
+
Yes / No?
+
+
✓ Resolved
+
+
+
+ +
+

Run a Session

+

An engineer launches the flow on a live ticket. FlowPilot — your AI copilot — acts as a virtual senior engineer, guiding decisions and capturing every action in real time.

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

Export to Ticket

+

When the session ends, full documentation is generated — formatted for your PSA. Paste it directly into ConnectWise, Atera, or Syncro. Done.

+
+
+
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 +
+
+
+
+ +
+
+
+ +
+ + +
+
+ +
Everything your team needs to
resolve faster and document better.
+ +
+ +
+
+ +
+

FlowPilot — Your AI Copilot

+

Like having a senior engineer on every call. FlowPilot suggests next steps, provides context-aware guidance, and automatically captures documentation as a byproduct of the troubleshooting session. It doesn't replace your team — it makes every engineer your best engineer.

+
+ +
+
+ +
+

Visual Flow Editor

+

Build branching decision trees with a drag-and-drop canvas. Add steps, conditions, commands, and notes — no code required.

+
+ +
+
+ +
+

Auto-Documentation

+

Every session generates timestamped, detailed notes — formatted for your PSA. Engineers never write another ticket note.

+
+ +
+
+ +
+

Team Knowledge Sharing

+

Share flows across your team. When one engineer solves a new problem, the whole team benefits from that path — instantly.

+
+ +
+
+ +
+

Session History & Analytics

+

Track which flows are used most, identify bottlenecks, and see how your team resolves issues over time.

+
+ +
+
+ +
+

PSA Integration

+

Connect directly to ConnectWise, Atera, and Syncro. Export session docs straight to tickets — no copy-paste needed.

+
+ +
+
+
+ +
+ + +
+
+ +
Simple pricing. No surprises.
+
Start free. Upgrade when your team is ready.
+ +
+ +
+
Free
+
For individual techs evaluating
+
+ $0 +
+
Free forever
+
    +
  • 3 decision trees
  • +
  • 20 sessions per month
  • +
  • Auto-documentation export
  • +
  • Session history (30 days)
  • +
  • Community support
  • +
+ Get Started +
+ + + +
+
Team
+
For growing MSPs with 5–25 techs
+
+ $25 + /user/mo +
+
Billed monthly or annually
+
    +
  • Everything in Pro
  • +
  • PSA integration (ConnectWise, Atera, Syncro)
  • +
  • Team analytics dashboard
  • +
  • Session sharing & collaboration
  • +
  • Client context system
  • +
  • Role-based permissions
  • +
  • Dedicated support
  • +
+ Start Free Trial +
+ +
+ +

+ Need Enterprise (25+ techs, SSO, custom branding)? Contact us +

+
+
+ +
+ + +
+
+ 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. +
+
+ Beta Tester — MSP Engineer, Southeast US +
+
+ +
+ + +
+

Ready to stop writing ticket notes?

+

Join the beta and see what happens when documentation becomes automatic.

+
+ + Join Beta +
+

Free to start. No credit card required.

+
+ + + + +
+ + + + \ No newline at end of file diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css index 73509b18..5abbc252 100644 --- a/frontend/src/styles/landing.css +++ b/frontend/src/styles/landing.css @@ -22,6 +22,7 @@ z-index: 0; overflow: hidden; } + .landing-ambient-glow::before { content: ''; position: absolute; @@ -30,9 +31,10 @@ transform: translateX(-50%); width: 900px; height: 900px; - background: radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 70%); + background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%); animation: landingAmbientPulse 12s ease-in-out infinite; } + .landing-ambient-glow::after { content: ''; position: absolute; @@ -40,12 +42,22 @@ right: -10%; width: 600px; height: 600px; - background: radial-gradient(circle, rgba(34,211,238,0.04) 0%, transparent 70%); + background: radial-gradient(circle, rgba(34, 211, 238, 0.04) 0%, transparent 70%); animation: landingAmbientPulse 16s ease-in-out infinite reverse; } + @keyframes landingAmbientPulse { - 0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } - 50% { opacity: 1; transform: translateX(-50%) scale(1.15); } + + 0%, + 100% { + opacity: 0.6; + transform: translateX(-50%) scale(1); + } + + 50% { + opacity: 1; + transform: translateX(-50%) scale(1.15); + } } /* ---- GRID PATTERN ---- */ @@ -55,13 +67,16 @@ 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); + 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 { position: relative; z-index: 1; } +.landing-page-content { + position: relative; + z-index: 1; +} /* ---- NAVIGATION ---- */ .landing-nav { @@ -73,11 +88,13 @@ padding: 0 2rem; transition: all 0.3s ease; } + .landing-nav.scrolled { background: rgba(14, 15, 24, 0.85); backdrop-filter: blur(20px) saturate(1.2); - border-bottom: 1px solid rgba(255,255,255,0.06); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); } + .landing-nav-inner { max-width: 1200px; margin: 0 auto; @@ -86,12 +103,14 @@ justify-content: space-between; height: 72px; } + .landing-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } + .landing-nav-logo-icon { width: 36px; height: 36px; @@ -100,9 +119,14 @@ display: flex; align-items: center; justify-content: center; - box-shadow: 0 0 20px rgba(6,182,212,0.2); + box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); } -.landing-nav-logo-icon svg { width: 20px; height: 20px; } + +.landing-nav-logo-icon svg { + width: 20px; + height: 20px; +} + .landing-nav-wordmark { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.25rem; @@ -110,12 +134,14 @@ color: #f0f0f5; letter-spacing: -0.02em; } + .landing-nav-wordmark span { background: linear-gradient(135deg, #22d3ee, #67e8f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } + .landing-nav-links { display: flex; align-items: center; @@ -124,6 +150,7 @@ margin: 0; padding: 0; } + .landing-nav-links a { font-size: 0.875rem; font-weight: 500; @@ -132,12 +159,17 @@ transition: color 0.2s; letter-spacing: 0.01em; } -.landing-nav-links a:hover { color: #f0f0f5; } + +.landing-nav-links a:hover { + color: #f0f0f5; +} + .landing-nav-cta { display: flex; align-items: center; gap: 1rem; } + .landing-btn-ghost { font-size: 0.875rem; font-weight: 500; @@ -147,7 +179,12 @@ border-radius: 8px; transition: all 0.2s; } -.landing-btn-ghost:hover { color: #f0f0f5; background: rgba(255,255,255,0.06); } + +.landing-btn-ghost:hover { + color: #f0f0f5; + background: rgba(255, 255, 255, 0.06); +} + .landing-btn-primary { font-size: 0.875rem; font-weight: 600; @@ -156,14 +193,15 @@ padding: 0.55rem 1.25rem; border-radius: 8px; background: linear-gradient(135deg, #06b6d4, #22d3ee); - box-shadow: 0 0 20px rgba(6,182,212,0.15), inset 0 1px 0 rgba(255,255,255,0.15); + box-shadow: 0 0 20px rgba(6, 182, 212, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: all 0.25s; letter-spacing: -0.01em; border: none; cursor: pointer; } + .landing-btn-primary:hover { - box-shadow: 0 0 30px rgba(6,182,212,0.3), inset 0 1px 0 rgba(255,255,255,0.2); + box-shadow: 0 0 30px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); transform: translateY(-1px); } @@ -174,14 +212,15 @@ max-width: 900px; margin: 0 auto; } + .landing-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 100px; - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 500; @@ -190,6 +229,7 @@ letter-spacing: 0.03em; animation: landingFadeInDown 0.8s ease-out; } + .landing-hero-badge::before { content: ''; width: 6px; @@ -198,10 +238,20 @@ background: #22d3ee; animation: landingPulse 2s ease-in-out infinite; } + @keyframes landingPulse { - 0%, 100% { opacity: 0.5; } - 50% { opacity: 1; box-shadow: 0 0 8px #22d3ee; } + + 0%, + 100% { + opacity: 0.5; + } + + 50% { + opacity: 1; + box-shadow: 0 0 8px #22d3ee; + } } + .landing-hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2.75rem, 6vw, 4.25rem); @@ -211,12 +261,14 @@ margin-bottom: 1.5rem; animation: landingFadeInUp 0.8s ease-out 0.15s both; } + .landing-gradient-text { background: linear-gradient(135deg, #22d3ee, #67e8f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } + .landing-hero-sub { font-size: 1.2rem; font-weight: 400; @@ -226,6 +278,7 @@ margin: 0 auto 2.5rem; animation: landingFadeInUp 0.8s ease-out 0.3s both; } + .landing-hero-actions { display: flex; align-items: center; @@ -233,6 +286,7 @@ gap: 1rem; animation: landingFadeInUp 0.8s ease-out 0.45s both; } + .landing-btn-hero-primary { font-size: 1rem; font-weight: 600; @@ -241,21 +295,24 @@ padding: 0.85rem 2rem; border-radius: 10px; background: linear-gradient(135deg, #06b6d4, #22d3ee); - box-shadow: 0 4px 30px rgba(6,182,212,0.2), inset 0 1px 0 rgba(255,255,255,0.15); + box-shadow: 0 4px 30px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: all 0.3s; letter-spacing: -0.01em; border: none; cursor: pointer; } + .landing-btn-hero-primary:hover { - box-shadow: 0 4px 40px rgba(6,182,212,0.35), inset 0 1px 0 rgba(255,255,255,0.2); + box-shadow: 0 4px 40px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); 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; @@ -263,13 +320,14 @@ text-decoration: none; padding: 0.85rem 2rem; border-radius: 10px; - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.3s; } + .landing-btn-hero-secondary:hover { - background: rgba(255,255,255,0.06); - border-color: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.1); color: #f0f0f5; } @@ -279,7 +337,8 @@ padding: 3rem 2rem 1rem; animation: landingFadeInUp 0.8s ease-out 0.6s both; } -.landing-social-proof-bar > p { + +.landing-social-proof-bar>p { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #5a5a6e; @@ -287,13 +346,18 @@ 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 { + text-align: center; +} + .landing-proof-stat .number { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.75rem; @@ -303,6 +367,7 @@ -webkit-text-fill-color: transparent; background-clip: text; } + .landing-proof-stat .label { font-size: 0.8rem; color: #5a5a6e; @@ -316,21 +381,24 @@ padding: 0 2rem; animation: landingFadeInUp 1s ease-out 0.75s both; } + .landing-preview-window { border-radius: 12px; border: 1px solid hsl(228, 8%, 16%); background: hsl(228, 10%, 10%); overflow: hidden; - box-shadow: 0 20px 80px rgba(0,0,0,0.4), 0 0 60px rgba(6,182,212,0.05); + box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(6, 182, 212, 0.05); } + .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 rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.02); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); } + .landing-preview-tab { display: flex; align-items: center; @@ -340,10 +408,11 @@ font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #a0a0b0; - border-right: 1px solid rgba(255,255,255,0.06); - background: rgba(255,255,255,0.02); + border-right: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(255, 255, 255, 0.02); position: relative; } + .landing-preview-tab::after { content: ''; position: absolute; @@ -353,6 +422,7 @@ height: 2px; background: linear-gradient(135deg, #06b6d4, #22d3ee); } + .landing-tab-icon { width: 14px; height: 14px; @@ -360,11 +430,13 @@ background: linear-gradient(135deg, #06b6d4, #22d3ee); flex-shrink: 0; } + .landing-tab-close { font-size: 0.65rem; color: #5a5a6e; margin-left: 4px; } + .landing-preview-url-bar { flex: 1; display: flex; @@ -372,25 +444,32 @@ 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 rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #5a5a6e; } -.landing-lock-icon { color: #22c55e; font-size: 0.6rem; } + +.landing-lock-icon { + color: #22c55e; + 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%; @@ -401,15 +480,31 @@ 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-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; @@ -417,6 +512,7 @@ flex-direction: column; gap: 0.5rem; } + .landing-preview-sidebar-item { padding: 8px 12px; border-radius: 8px; @@ -426,21 +522,24 @@ align-items: center; gap: 8px; } + .landing-preview-sidebar-item.active { - background: rgba(6,182,212,0.08); + background: rgba(6, 182, 212, 0.08); color: #22d3ee; border-left: 3px solid #22d3ee; } + .landing-preview-sidebar-item .dot { width: 8px; height: 8px; border-radius: 50%; } + .landing-preview-canvas { flex: 1; - background: rgba(255,255,255,0.01); + background: rgba(255, 255, 255, 0.01); border-radius: 12px; - border: 1px dashed rgba(255,255,255,0.06); + border: 1px dashed rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; @@ -454,6 +553,7 @@ flex-direction: column; align-items: center; } + .landing-tree-node { padding: 10px 20px; border-radius: 10px; @@ -461,27 +561,32 @@ font-weight: 600; white-space: nowrap; } + .landing-tree-node.root { background: linear-gradient(135deg, #06b6d4, #22d3ee); color: #000; - box-shadow: 0 0 20px rgba(6,182,212,0.2); + box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); } + .landing-tree-node.decision { background: hsl(228, 10%, 10%); border: 1px solid hsl(228, 8%, 16%); color: #f0f0f5; font-size: 0.7rem; } + .landing-tree-connector { width: 2px; height: 24px; - background: rgba(6,182,212,0.2); + background: rgba(6, 182, 212, 0.2); } + .landing-tree-branch { display: flex; gap: 2rem; position: relative; } + .landing-tree-branch::before { content: ''; position: absolute; @@ -490,14 +595,19 @@ width: calc(100% - 100px); transform: translateX(-50%); height: 2px; - background: rgba(6,182,212,0.15); + background: rgba(6, 182, 212, 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-branch-arm .landing-tree-connector { + height: 18px; +} + .landing-tree-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; @@ -507,8 +617,15 @@ } /* ---- SECTION LAYOUT ---- */ -.landing-page section { padding: 6rem 2rem; } -.landing-section-inner { max-width: 1100px; margin: 0 auto; } +.landing-page section { + padding: 6rem 2rem; +} + +.landing-section-inner { + max-width: 1100px; + margin: 0 auto; +} + .landing-section-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; @@ -518,6 +635,7 @@ text-transform: uppercase; margin-bottom: 1rem; } + .landing-section-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2rem, 4vw, 2.75rem); @@ -526,6 +644,7 @@ line-height: 1.15; margin-bottom: 1rem; } + .landing-section-desc { font-size: 1.1rem; color: #a0a0b0; @@ -538,7 +657,7 @@ max-width: 1100px; margin: 0 auto; height: 1px; - background: rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.06); } /* ---- PROBLEM SECTION ---- */ @@ -549,18 +668,21 @@ margin-top: 3.5rem; align-items: start; } + .landing-problem-card { padding: 2rem; border-radius: 16px; - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.3s; } + .landing-problem-card:hover { - background: rgba(255,255,255,0.06); - border-color: rgba(255,255,255,0.08); + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } + .landing-problem-icon { width: 44px; height: 44px; @@ -571,10 +693,27 @@ margin-bottom: 1.25rem; font-size: 1.25rem; } -.landing-problem-icon.red { background: rgba(239,68,68,0.1); color: #ef4444; } -.landing-problem-icon.amber { background: rgba(245,158,11,0.1); color: #f59e0b; } -.landing-problem-icon.slate { background: rgba(148,163,184,0.1); color: #94a3b8; } -.landing-problem-icon.violet { background: rgba(139,92,246,0.1); color: #8b5cf6; } + +.landing-problem-icon.red { + background: rgba(239, 68, 68, 0.1); + color: #ef4444; +} + +.landing-problem-icon.amber { + background: rgba(245, 158, 11, 0.1); + color: #f59e0b; +} + +.landing-problem-icon.slate { + background: rgba(148, 163, 184, 0.1); + color: #94a3b8; +} + +.landing-problem-icon.violet { + background: rgba(139, 92, 246, 0.1); + color: #8b5cf6; +} + .landing-problem-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.15rem; @@ -582,6 +721,7 @@ margin-bottom: 0.6rem; letter-spacing: -0.01em; } + .landing-problem-card p { font-size: 0.9rem; color: #a0a0b0; @@ -594,6 +734,7 @@ padding: 5rem 2rem; position: relative; } + .landing-equation-section::before { content: ''; position: absolute; @@ -602,9 +743,10 @@ transform: translateX(-50%); width: 500px; height: 100%; - background: radial-gradient(ellipse, rgba(6,182,212,0.04) 0%, transparent 70%); + background: radial-gradient(ellipse, rgba(6, 182, 212, 0.04) 0%, transparent 70%); pointer-events: none; } + .landing-brand-equation { display: flex; align-items: center; @@ -617,13 +759,19 @@ letter-spacing: -0.02em; margin-bottom: 1.5rem; } + .landing-eq-item { padding: 0.5rem 1.25rem; border-radius: 12px; - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); } -.landing-eq-operator { color: #22d3ee; font-size: 2rem; } + +.landing-eq-operator { + color: #22d3ee; + font-size: 2rem; +} + .landing-eq-result { background: linear-gradient(135deg, #06b6d4, #22d3ee); -webkit-background-clip: text; @@ -631,6 +779,7 @@ background-clip: text; padding: 0; } + .landing-equation-desc { font-size: 1.1rem; color: #a0a0b0; @@ -647,19 +796,22 @@ margin-top: 3.5rem; counter-reset: landing-step; } + .landing-step-card { padding: 2rem; border-radius: 16px; - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); position: relative; counter-increment: landing-step; transition: all 0.3s; } + .landing-step-card:hover { - background: rgba(255,255,255,0.06); - border-color: rgba(6,182,212,0.15); + background: rgba(255, 255, 255, 0.06); + border-color: rgba(6, 182, 212, 0.15); } + .landing-step-card::before { content: counter(landing-step, decimal-leading-zero); font-family: 'JetBrains Mono', monospace; @@ -669,6 +821,7 @@ opacity: 0.6; letter-spacing: 0.05em; } + .landing-step-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.25rem; @@ -676,11 +829,13 @@ margin: 1rem 0 0.75rem; letter-spacing: -0.01em; } + .landing-step-card p { font-size: 0.9rem; color: #a0a0b0; line-height: 1.65; } + .landing-step-visual { width: 100%; height: 120px; @@ -702,6 +857,7 @@ width: 100%; align-items: center; } + .landing-mock-node { padding: 6px 10px; border-radius: 6px; @@ -709,9 +865,27 @@ font-family: 'JetBrains Mono', monospace; white-space: nowrap; } -.landing-mock-node.start { background: rgba(6,182,212,0.15); color: #22d3ee; border: 1px solid rgba(6,182,212,0.2); } -.landing-mock-node.step { background: rgba(255,255,255,0.03); color: #a0a0b0; border: 1px solid rgba(255,255,255,0.06); } -.landing-mock-connector { width: 20px; display: flex; align-items: center; justify-content: center; color: #5a5a6e; font-size: 0.7rem; } + +.landing-mock-node.start { + background: rgba(6, 182, 212, 0.15); + color: #22d3ee; + border: 1px solid rgba(6, 182, 212, 0.2); +} + +.landing-mock-node.step { + background: rgba(255, 255, 255, 0.03); + color: #a0a0b0; + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.landing-mock-connector { + width: 20px; + display: flex; + align-items: center; + justify-content: center; + color: #5a5a6e; + font-size: 0.7rem; +} /* Mock session */ .landing-mock-session { @@ -721,6 +895,7 @@ flex-direction: column; gap: 0.35rem; } + .landing-mock-chat-line { display: flex; align-items: center; @@ -728,13 +903,20 @@ font-size: 0.6rem; font-family: 'JetBrains Mono', monospace; } + .landing-mock-chat-line .label { color: #22d3ee; font-weight: 600; min-width: 55px; } -.landing-mock-chat-line .text { color: #a0a0b0; } -.landing-mock-chat-line.doc .label { color: #22c55e; } + +.landing-mock-chat-line .text { + color: #a0a0b0; +} + +.landing-mock-chat-line.doc .label { + color: #22c55e; +} /* Mock ticket */ .landing-mock-ticket { @@ -744,15 +926,17 @@ flex-direction: column; gap: 0.35rem; } + .landing-mock-ticket-header { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: #22d3ee; font-weight: 600; padding-bottom: 0.35rem; - border-bottom: 1px solid rgba(255,255,255,0.06); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 0.15rem; } + .landing-mock-ticket-line { font-size: 0.55rem; font-family: 'JetBrains Mono', monospace; @@ -760,8 +944,15 @@ display: flex; gap: 6px; } -.landing-mock-ticket-line .time { color: #5a5a6e; min-width: 35px; } -.landing-mock-ticket-line .check { color: #22c55e; } + +.landing-mock-ticket-line .time { + color: #5a5a6e; + min-width: 35px; +} + +.landing-mock-ticket-line .check { + color: #22c55e; +} /* ---- FEATURES GRID ---- */ .landing-features-grid { @@ -770,29 +961,33 @@ gap: 1.5rem; margin-top: 3.5rem; } + .landing-feature-card { padding: 2rem; border-radius: 16px; - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.3s ease; } + .landing-feature-card:hover { - background: rgba(255,255,255,0.06); - border-color: rgba(6,182,212,0.15); + background: rgba(255, 255, 255, 0.06); + border-color: rgba(6, 182, 212, 0.15); transform: translateY(-3px); } + .landing-feature-icon { width: 40px; height: 40px; border-radius: 10px; - background: rgba(6,182,212,0.08); + background: rgba(6, 182, 212, 0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: #22d3ee; } + .landing-feature-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.05rem; @@ -800,14 +995,16 @@ margin-bottom: 0.6rem; letter-spacing: -0.01em; } + .landing-feature-card p { font-size: 0.875rem; color: #a0a0b0; line-height: 1.6; } + .landing-feature-card.highlight { - border-color: rgba(6,182,212,0.15); - background: rgba(6,182,212,0.03); + border-color: rgba(6, 182, 212, 0.15); + background: rgba(6, 182, 212, 0.03); grid-column: span 2; } @@ -819,20 +1016,26 @@ margin-top: 3.5rem; align-items: start; } + .landing-pricing-card { padding: 2.5rem 2rem; border-radius: 16px; - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.3s; } -.landing-pricing-card:hover { border-color: rgba(255,255,255,0.08); } -.landing-pricing-card.featured { - border-color: rgba(6,182,212,0.2); - background: rgba(6,182,212,0.03); - position: relative; - box-shadow: 0 0 40px rgba(6,182,212,0.06); + +.landing-pricing-card:hover { + border-color: rgba(255, 255, 255, 0.08); } + +.landing-pricing-card.featured { + border-color: rgba(6, 182, 212, 0.2); + background: rgba(6, 182, 212, 0.03); + position: relative; + box-shadow: 0 0 40px rgba(6, 182, 212, 0.06); +} + .landing-pricing-card.featured::before { content: 'Most Popular'; position: absolute; @@ -849,6 +1052,7 @@ letter-spacing: 0.05em; text-transform: uppercase; } + .landing-pricing-plan-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.15rem; @@ -856,38 +1060,45 @@ margin-bottom: 0.5rem; letter-spacing: -0.01em; } + .landing-pricing-target { font-size: 0.8rem; color: #5a5a6e; margin-bottom: 1.5rem; } + .landing-pricing-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.25rem; } + .landing-pricing-price .amount { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; } + .landing-pricing-card.featured .landing-pricing-price .amount { background: linear-gradient(135deg, #22d3ee, #67e8f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } + .landing-pricing-price .period { font-size: 0.85rem; color: #5a5a6e; } + .landing-pricing-note { font-size: 0.8rem; color: #5a5a6e; margin-bottom: 2rem; } + .landing-pricing-features { list-style: none; display: flex; @@ -896,6 +1107,7 @@ margin-bottom: 2rem; padding: 0; } + .landing-pricing-features li { font-size: 0.875rem; color: #a0a0b0; @@ -903,6 +1115,7 @@ align-items: flex-start; gap: 0.6rem; } + .landing-pricing-features li::before { content: '\2713'; color: #22d3ee; @@ -911,6 +1124,7 @@ margin-top: 2px; flex-shrink: 0; } + .landing-pricing-btn { display: block; text-align: center; @@ -922,33 +1136,45 @@ transition: all 0.3s; width: 100%; } + .landing-pricing-btn.outline { color: #f0f0f5; border: 1px solid hsl(228, 8%, 16%); 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.06); + border-color: rgba(255, 255, 255, 0.12); } + .landing-pricing-btn.filled { color: #000; background: linear-gradient(135deg, #06b6d4, #22d3ee); - box-shadow: 0 0 20px rgba(6,182,212,0.15); + box-shadow: 0 0 20px rgba(6, 182, 212, 0.15); border: none; } + .landing-pricing-btn.filled:hover { - box-shadow: 0 0 30px rgba(6,182,212,0.3); + box-shadow: 0 0 30px rgba(6, 182, 212, 0.3); transform: translateY(-1px); } + .landing-pricing-enterprise { text-align: center; margin-top: 2rem; font-size: 0.85rem; color: #5a5a6e; } -.landing-pricing-enterprise a { color: #22d3ee; text-decoration: none; } -.landing-pricing-enterprise a:hover { text-decoration: underline; } + +.landing-pricing-enterprise a { + color: #22d3ee; + text-decoration: none; +} + +.landing-pricing-enterprise a:hover { + text-decoration: underline; +} /* ---- TESTIMONIAL ---- */ .landing-testimonial-section { @@ -957,6 +1183,7 @@ margin: 0 auto; padding: 5rem 2rem; } + .landing-testimonial-quote { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; @@ -968,22 +1195,41 @@ margin-bottom: 1.5rem; position: relative; } + .landing-testimonial-quote::before { content: '\201C'; font-size: 4rem; color: #22d3ee; opacity: 0.3; - position: absolute; - top: -1rem; - left: -0.5rem; + vertical-align: super; + margin-right: 1rem; + top: -2.5rem; font-family: 'Bricolage Grotesque', sans-serif; line-height: 1; } + +.landing-testimonial-quote::after { + content: '\201D'; + font-size: 4rem; + color: #22d3ee; + opacity: 0.3; + vertical-align: sub; + margin-left: 1rem; + font-family: 'Bricolage Grotesque', sans-serif; + line-height: 1; + position: absolute; + bottom: -2.5rem; +} + .landing-testimonial-author { font-size: 0.9rem; color: #5a5a6e; } -.landing-testimonial-author strong { color: #a0a0b0; font-weight: 600; } + +.landing-testimonial-author strong { + color: #a0a0b0; + font-weight: 600; +} /* ---- CTA ---- */ .landing-cta-section { @@ -991,6 +1237,7 @@ padding: 6rem 2rem; position: relative; } + .landing-cta-section::before { content: ''; position: absolute; @@ -999,9 +1246,10 @@ transform: translateX(-50%); width: 700px; height: 400px; - background: radial-gradient(ellipse, rgba(6,182,212,0.05) 0%, transparent 70%); + background: radial-gradient(ellipse, rgba(6, 182, 212, 0.05) 0%, transparent 70%); pointer-events: none; } + .landing-cta-section h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2rem, 4vw, 2.75rem); @@ -1009,19 +1257,22 @@ letter-spacing: -0.03em; margin-bottom: 1rem; } -.landing-cta-section > p { + +.landing-cta-section>p { font-size: 1.1rem; color: #a0a0b0; max-width: 500px; margin: 0 auto 2rem; line-height: 1.7; } + .landing-cta-email-form { display: flex; gap: 0.75rem; max-width: 440px; margin: 0 auto; } + .landing-cta-email-input { flex: 1; padding: 0.85rem 1.25rem; @@ -1034,21 +1285,28 @@ outline: none; transition: border-color 0.3s; } -.landing-cta-email-input::placeholder { color: #5a5a6e; } + +.landing-cta-email-input::placeholder { + color: #5a5a6e; +} + .landing-cta-email-input:focus { border-color: #06b6d4; - box-shadow: 0 0 0 3px rgba(6,182,212,0.1); + box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1); } + .landing-cta-fine-print { font-size: 0.75rem; color: #5a5a6e; margin-top: 1rem; } + .landing-cta-success { font-size: 0.85rem; color: #22c55e; margin-top: 0.75rem; } + .landing-cta-error { font-size: 0.85rem; color: #ef4444; @@ -1057,9 +1315,10 @@ /* ---- FOOTER ---- */ .landing-footer { - border-top: 1px solid rgba(255,255,255,0.06); + border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 3rem 2rem; } + .landing-footer-inner { max-width: 1100px; margin: 0 auto; @@ -1069,15 +1328,18 @@ flex-wrap: wrap; gap: 1rem; } + .landing-footer-left { display: flex; align-items: center; gap: 0.75rem; } + .landing-footer-copy { font-size: 0.8rem; color: #5a5a6e; } + .landing-footer-links { display: flex; gap: 1.5rem; @@ -1085,22 +1347,41 @@ margin: 0; padding: 0; } + .landing-footer-links a { font-size: 0.8rem; color: #5a5a6e; text-decoration: none; transition: color 0.2s; } -.landing-footer-links a:hover { color: #a0a0b0; } + +.landing-footer-links a:hover { + color: #a0a0b0; +} /* ---- 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); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(-12px); + } + + to { + opacity: 1; + transform: translateY(0); + } } /* ---- SCROLL REVEAL ---- */ @@ -1109,6 +1390,7 @@ transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } + .landing-reveal.visible { opacity: 1; transform: translateY(0); @@ -1116,18 +1398,44 @@ /* ---- RESPONSIVE ---- */ @media (max-width: 900px) { + .landing-problem-grid, .landing-steps-container, .landing-features-grid, .landing-pricing-grid { grid-template-columns: 1fr; } - .landing-feature-card.highlight { grid-column: span 1; } - .landing-nav-links { display: none; } - .landing-preview-sidebar { display: none; } - .landing-tree-branch { gap: 1rem; } - .landing-hero { padding: 8rem 1.5rem 4rem; } - .landing-brand-equation { font-size: 1.25rem; gap: 0.5rem; } - .landing-eq-item { padding: 0.35rem 0.75rem; } - .landing-cta-email-form { flex-direction: column; } -} + + .landing-feature-card.highlight { + grid-column: span 1; + } + + .landing-nav-links { + display: none; + } + + .landing-preview-sidebar { + display: none; + } + + .landing-tree-branch { + gap: 1rem; + } + + .landing-hero { + padding: 8rem 1.5rem 4rem; + } + + .landing-brand-equation { + font-size: 1.25rem; + gap: 0.5rem; + } + + .landing-eq-item { + padding: 0.35rem 0.75rem; + } + + .landing-cta-email-form { + flex-direction: column; + } +} \ No newline at end of file