diff --git a/index.html b/index.html new file mode 100644 index 0000000..16ddcd9 --- /dev/null +++ b/index.html @@ -0,0 +1,708 @@ + + + + + + SeoPush – תוכן AI שמקדם את האתר שלך אוטומטית + + + + + + + + + + + + + +
+
+ + + התחילו בחינם + +
+ +
+ +
+ +
+ +
+
+ + פלטפורמת AI לקידום אורגני +
+

+ תוכן שמקדם את האתר שלך — + כתוב, מותאם SEO ומפורסם אוטומטית +

+

+ SeoPush יוצר עבורכם מאמרים איכותיים עם בינה מלאכותית, מבצע אופטימיזציה מלאה לגוגל, ומפרסם ישירות לאתר שלכם — הכל באופן אוטומטי. +

+
+ + התחילו בחינם + + + + ראו איך זה עובד + +
+ +
+
+ + +
+
+
+
+ 2,500+ + אתרים מקודמים +
+ +
+ 150K+ + מאמרים שנוצרו +
+ +
+ 98% + שביעות רצון +
+ +
+ 24/7 + פעילות אוטומטית +
+
+
+
+ + +
+
+
+

הדרך הישנה מול הדרך החדשה

+

כמה באמת עולה לכם קידום אורגני היום?

+
+
+
+ +

הדרך המסורתית

+
    +
  • + + ₪800-2,000 למאמר מקצועי +
    • +
  • + + 3-7 ימי עבודה לכל תוכן +
    • +
  • + + תיאום מול כותבים וסוכנויות +
    • +
  • + + העלאה ידנית לאתר +
    • +
  • + + מעקב דירוגים בנפרד +
    • +
+
+ עלות חודשית משוערת + ₪4,000-12,000 +
+
+
+
מומלץ
+ +

עם SeoPush

+
    +
  • + + מאמרים ללא הגבלה +
    • +
  • + + תוכן מוכן תוך דקות +
    • +
  • + + הכל אוטומטי — בלי התעסקות +
    • +
  • + + פרסום ישיר לאתר שלכם +
    • +
  • + + מעקב דירוגים מובנה +
    • +
+
+ החל מ- + ₪299/חודש +
+
+
+
+
+ + +
+
+
+

איך SeoPush עובד?

+

שלושה צעדים פשוטים לקידום אורגני אוטומטי

+
+
+
+
1
+ +

בחרו נושאים ומילות מפתח

+

הגדירו את התחומים שמעניינים אתכם או תנו ל-AI לזהות הזדמנויות קידום אוטומטית.

+
+ +
+
2
+ +

ה-AI יוצר תוכן מושלם

+

מאמר מקיף עם כותרות, FAQ, תמונות ומטא תיאורים — הכל מותאם SEO.

+
+ +
+
3
+ +

פרסום אוטומטי לאתר

+

התוכן עולה ישירות לוורדפרס או לאתר הסטטי שלכם, עם תזמון חכם.

+
+
+
+
+ + +
+
+
+

למה עסקים בוחרים ב-SeoPush

+

כל הכלים שאתם צריכים לקידום אורגני מנצח

+
+
+
+ +

אוטופיילוט מלא

+

הפעילו ושכחו — SeoPush עובד ברקע 24/7 בלי שתצטרכו לגעת במשהו.

+
+
+ +

קמפיינים אוטומטיים

+

הגדירו קמפיין פעם אחת והמערכת תייצר ותפרסם תוכן באופן רציף.

+
+
+ +

מעקב דירוגים

+

עקבו אחרי הביצועים של כל מילת מפתח וראו איך האתר מטפס בתוצאות.

+
+
+ +

תזמון חכם

+

קבעו קצב פרסום יומי, שבועי או חודשי — המערכת תדאג להכל.

+
+
+ +

תוכן עם FAQ

+

כל מאמר כולל שאלות נפוצות שמגדילות את הסיכוי ל-Featured Snippets.

+
+
+ +

וורדפרס + אתרים סטטיים

+

תמיכה מלאה באתרי וורדפרס ואתרים סטטיים — חיבור מהיר ופשוט.

+
+
+
+
+ + +
+
+
+

תכנית שמתאימה לכל עסק

+

התחילו בחינם ושדרגו כשאתם מוכנים

+
+
+
+
+

סטארטר

+
+ ₪ + 299 + /חודש +
+
+
    +
  • + + עד 10 מאמרים בחודש +
    • +
  • + + אתר אחד מחובר +
    • +
  • + + מעקב 50 מילות מפתח +
    • +
  • + + תמיכה במייל +
    • +
+ התחילו עכשיו +
+
+
הכי פופולרי
+
+

צמיחה

+
+ ₪ + 599 + /חודש +
+
+
    +
  • + + עד 30 מאמרים בחודש +
    • +
  • + + 3 אתרים מחוברים +
    • +
  • + + מעקב 200 מילות מפתח +
    • +
  • + + אוטופיילוט מלא +
    • +
  • + + תמיכת צ׳אט בעברית +
    • +
+ התחילו עכשיו +
+
+
+

ארגוני

+
+ ₪ + 1,199 + /חודש +
+
+
    +
  • + + מאמרים ללא הגבלה +
    • +
  • + + אתרים ללא הגבלה +
    • +
  • + + מעקב 1,000 מילות מפתח +
    • +
  • + + מנהל לקוח ייעודי +
    • +
  • + + API מלא +
    • +
+ צרו קשר +
+
+
+
+ + +
+
+
+

מה הלקוחות שלנו אומרים

+
+
+
+
+ +
״תוך חודשיים הכפלנו את התנועה האורגנית. ה-AI כותב תוכן ברמה שהייתי צריך לשלם אלפי שקלים עליה.״
+
+
+ +
+ ישראל כהן + מנכ״ל, חברת SaaS +
+
+
+
+
+ +
״חסכתי לעצמי 20 שעות בשבוע. במקום לכתוב תוכן, אני מתמקדת בלפתח את העסק. SeoPush משנה את חוקי המשחק.״
+
+
+ +
+ מיכל לוי + בעלת חנות אונליין +
+
+
+
+
+ +
״אחרי שנים של תסכול מקידום אורגני, סוף סוף יש פתרון שעובד. התוכן מדויק, ה-SEO מעולה, והתוצאות מדברות.״
+
+
+ +
+ דביר אברהם + משווק דיגיטלי +
+
+
+
+
+
+ + +
+
+
+

שאלות נפוצות

+

כל מה שרציתם לדעת על SeoPush

+
+
+
+ +
+

SeoPush מנתח את התחום שלכם, חוקר מילות מפתח עם פוטנציאל תנועה גבוה, ובודק מה עובד אצל המתחרים. על סמך הנתונים האלה, ה-AI יוצר תוכן מותאם שעונה על שאלות אמיתיות שאנשים מחפשים.

+
+
+
+ +
+

התוכן שנוצר עובר בדיקות איכות אוטומטיות ומבוסס על מודלי AI מתקדמים. המאמרים כוללים מבנה נכון, FAQ, תמונות ממוטבות, וכתיבה בעברית טבעית שנשמעת כמו אדם כתב אותה.

+
+
+
+ +
+

SEO הוא תהליך שלוקח זמן, אבל לקוחות רבים מדווחים על עלייה בתנועה תוך 4-8 שבועות. היתרון של SeoPush הוא שהוא עובד ברציפות, מה שמאיץ את התוצאות לעומת פרסום ספורדי.

+
+
+
+ +
+

לוורדפרס יש תוסף ייעודי שמתקינים בקליק אחד. לאתרים סטטיים, אנחנו מספקים API פשוט או אפשרות לפרסום דרך GitHub/Netlify. תהליך החיבור לוקח פחות מ-5 דקות.

+
+
+
+ +
+

לא. כל התכניות הן חודשיות וניתן לבטל בכל עת. אנחנו כל כך בטוחים במוצר שאנחנו מציעים 14 ימי ניסיון חינם ללא צורך בכרטיס אשראי.

+
+
+
+ +
+

יש לנו מדיניות החזר כספי מלא ב-30 הימים הראשונים. אם SeoPush לא עובד בשבילכם, תקבלו את כספכם בחזרה — בלי שאלות.

+
+
+
+
+
+ + +
+
+
+

מוכנים להתחיל לקדם את האתר שלכם?

+

הצטרפו לאלפי עסקים שכבר מקדמים עם SeoPush

+ + קבלו ניתוח SEO חינם + + +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b33d5a7 --- /dev/null +++ b/script.js @@ -0,0 +1,142 @@ +(function() { + 'use strict'; + + // Mobile menu toggle + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + const mobileNav = document.querySelector('.mobile-nav'); + + if (mobileMenuBtn && mobileNav) { + mobileMenuBtn.addEventListener('click', function() { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + mobileNav.classList.toggle('active'); + }); + + // Close mobile menu when clicking a link + mobileNav.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + mobileMenuBtn.setAttribute('aria-expanded', 'false'); + mobileNav.classList.remove('active'); + }); + }); + } + + // FAQ accordion + const faqItems = document.querySelectorAll('.faq-item'); + + faqItems.forEach(function(item) { + const question = item.querySelector('.faq-question'); + + question.addEventListener('click', function() { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + + // Close all other items + faqItems.forEach(function(otherItem) { + if (otherItem !== item) { + otherItem.classList.remove('active'); + otherItem.querySelector('.faq-question').setAttribute('aria-expanded', 'false'); + } + }); + + // Toggle current item + this.setAttribute('aria-expanded', !isExpanded); + item.classList.toggle('active'); + }); + }); + + // Scroll reveal animation + const revealElements = document.querySelectorAll('.reveal'); + + if (revealElements.length > 0 && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + const revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(function(el) { + revealObserver.observe(el); + }); + } else { + // If reduced motion is preferred, show all elements immediately + revealElements.forEach(function(el) { + el.classList.add('visible'); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const targetElement = document.querySelector(targetId); + if (targetElement) { + e.preventDefault(); + const headerHeight = document.querySelector('.header').offsetHeight; + const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); + }); + + // Form submission handling + const leadForm = document.querySelector('.lead-form'); + + if (leadForm) { + leadForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const formData = new FormData(this); + const submitBtn = this.querySelector('button[type="submit"]'); + const originalText = submitBtn.innerHTML; + + // Show loading state + submitBtn.innerHTML = 'שולח...'; + submitBtn.disabled = true; + + // Simulate form submission (replace with actual endpoint) + setTimeout(function() { + submitBtn.innerHTML = '✓ נשלח בהצלחה!'; + submitBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)'; + + // Reset form + leadForm.reset(); + + // Reset button after delay + setTimeout(function() { + submitBtn.innerHTML = originalText; + submitBtn.style.background = ''; + submitBtn.disabled = false; + }, 3000); + }, 1500); + }); + } + + // Header background on scroll + const header = document.querySelector('.header'); + let lastScroll = 0; + + window.addEventListener('scroll', function() { + const currentScroll = window.pageYOffset; + + if (currentScroll > 50) { + header.style.background = 'rgba(15, 15, 26, 0.95)'; + } else { + header.style.background = 'rgba(15, 15, 26, 0.8)'; + } + + lastScroll = currentScroll; + }, { passive: true }); + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..52610c8 --- /dev/null +++ b/style.css @@ -0,0 +1,1216 @@ +:root { + --primary: #6366f1; + --primary-dark: #4f46e5; + --secondary: #8b5cf6; + --accent: #a78bfa; + --bg: #0f0f1a; + --bg-elevated: #1a1a2e; + --bg-card: #16162a; + --text: #f1f5f9; + --text-muted: #94a3b8; + --text-dim: #7a8599; + --border: rgba(255, 255, 255, 0.08); + --border-light: rgba(255, 255, 255, 0.12); + --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); + --gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); + --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5); + --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3); + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 20px; + --radius-xl: 28px; + --font-hebrew: 'Heebo', sans-serif; + --font-english: 'Inter', sans-serif; + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 400ms ease; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +body { + font-family: var(--font-hebrew); + font-size: 1rem; + line-height: 1.7; + color: var(--text); + background-color: var(--bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: 1.5rem; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Typography */ +h1, h2, h3, h4 { + font-weight: 600; + line-height: 1.3; + letter-spacing: -0.01em; +} + +h1 { + font-size: clamp(2rem, 5vw, 3.25rem); +} + +h2 { + font-size: clamp(1.75rem, 4vw, 2.5rem); +} + +h3 { + font-size: clamp(1.125rem, 2.5vw, 1.375rem); +} + +.gradient-text { + background: var(--gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.875rem 1.75rem; + font-family: var(--font-hebrew); + font-size: 1rem; + font-weight: 500; + text-decoration: none; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--transition-base); + white-space: nowrap; +} + +.btn:focus-visible { + outline: 3px solid var(--text); + outline-offset: 2px; +} + +.btn-primary { + background: var(--gradient); + color: white; + box-shadow: var(--shadow-sm), 0 0 20px rgba(99, 102, 241, 0.3); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md), 0 0 30px rgba(99, 102, 241, 0.4); +} + +.btn-secondary { + background: var(--bg-elevated); + color: var(--text); + border: 1px solid var(--border-light); +} + +.btn-secondary:hover { + background: var(--bg-card); + border-color: var(--primary); +} + +.btn-outline { + background: transparent; + color: var(--text); + border: 1px solid var(--border-light); +} + +.btn-outline:hover { + background: var(--gradient-subtle); + border-color: var(--primary); +} + +.btn-large { + padding: 1rem 2rem; + font-size: 1.125rem; +} + +.btn-block { + width: 100%; +} + +.btn-header { + padding: 0.625rem 1.25rem; + font-size: 0.875rem; + background: var(--gradient); + color: white; +} + +/* Header */ +.header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + background: rgba(15, 15, 26, 0.8); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--border); +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 72px; +} + +.logo { + display: flex; + align-items: center; + gap: 0.625rem; + text-decoration: none; +} + +.logo-icon { + width: 36px; + height: 36px; +} + +.logo-text { + font-size: 1.375rem; + font-weight: 600; + color: var(--text); + font-family: var(--font-english); +} + +.nav { + display: none; + gap: 2rem; +} + +.nav-link { + font-size: 0.9375rem; + color: var(--text-muted); + text-decoration: none; + transition: color var(--transition-fast); +} + +.nav-link:hover, +.nav-link:focus { + color: var(--text); +} + +.header .btn-header { + display: none; +} + +.mobile-menu-btn { + display: flex; + flex-direction: column; + gap: 5px; + padding: 8px; + background: none; + border: none; + cursor: pointer; +} + +.mobile-menu-btn span { + display: block; + width: 24px; + height: 2px; + background: var(--text); + transition: all var(--transition-base); +} + +.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +.mobile-nav { + display: none; + flex-direction: column; + gap: 1rem; + padding: 1.5rem; + background: var(--bg-elevated); + border-bottom: 1px solid var(--border); +} + +.mobile-nav.active { + display: flex; +} + +.mobile-nav-link { + font-size: 1rem; + color: var(--text-muted); + text-decoration: none; + padding: 0.5rem 0; +} + +.mobile-nav-cta { + margin-top: 0.5rem; +} + +@media (min-width: 768px) { + .nav { + display: flex; + } + + .header .btn-header { + display: inline-flex; + } + + .mobile-menu-btn, + .mobile-nav { + display: none !important; + } +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + padding-top: 72px; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + background: + radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.25) 0%, transparent 60%), + radial-gradient(ellipse 60% 40% at 90% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), + radial-gradient(ellipse 40% 30% at 10% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%); + pointer-events: none; +} + +.hero-content { + position: relative; + text-align: center; + padding-block: 4rem; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--gradient-subtle); + border: 1px solid var(--border-light); + border-radius: 100px; + font-size: 0.875rem; + color: var(--accent); + margin-bottom: 1.5rem; +} + +.hero-title { + max-width: 900px; + margin-inline: auto; + margin-bottom: 1.5rem; +} + +.hero-subtitle { + max-width: 580px; + margin-inline: auto; + font-size: 1.125rem; + color: var(--text-muted); + margin-bottom: 2.5rem; +} + +.hero-cta { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + margin-bottom: 4rem; +} + +.hero-visual { + max-width: 800px; + margin-inline: auto; +} + +.dashboard-mockup { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-lg), var(--shadow-glow); +} + +.mockup-header { + display: flex; + gap: 6px; + padding: 12px 16px; + background: var(--bg-elevated); + border-bottom: 1px solid var(--border); +} + +.mockup-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--text-dim); +} + +.mockup-dot:nth-child(1) { background: #ff5f56; } +.mockup-dot:nth-child(2) { background: #ffbd2e; } +.mockup-dot:nth-child(3) { background: #27ca40; } + +.mockup-content { + display: flex; + min-height: 280px; +} + +.mockup-sidebar { + width: 60px; + padding: 16px 12px; + background: var(--bg-elevated); + border-inline-end: 1px solid var(--border); + display: flex; + flex-direction: column; + gap: 12px; +} + +.mockup-menu-item { + height: 36px; + background: var(--border); + border-radius: var(--radius-sm); +} + +.mockup-menu-item.active { + background: var(--gradient); +} + +.mockup-main { + flex: 1; + padding: 24px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.mockup-card { + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: 20px; +} + +.mockup-title { + width: 40%; + height: 16px; + background: var(--gradient); + border-radius: 4px; + margin-bottom: 16px; +} + +.mockup-text { + width: 100%; + height: 10px; + background: var(--border); + border-radius: 4px; + margin-bottom: 10px; +} + +.mockup-text.short { + width: 60%; +} + +.mockup-stats { + display: flex; + gap: 12px; + align-items: flex-end; + height: 100px; + padding: 20px; + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-md); +} + +.mockup-stat { + flex: 1; + height: 100%; + display: flex; + align-items: flex-end; +} + +.stat-bar { + width: 100%; + height: var(--height); + background: var(--gradient); + border-radius: 4px 4px 0 0; +} + +/* Trust Bar */ +.trust-bar { + padding-block: 3rem; + background: var(--bg-elevated); + border-block: 1px solid var(--border); +} + +.trust-grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 1.5rem 2.5rem; +} + +.trust-item { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.trust-number { + font-size: 1.875rem; + font-weight: 600; + font-family: var(--font-english); + background: var(--gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.trust-label { + font-size: 0.875rem; + color: var(--text-muted); + margin-top: 0.25rem; +} + +.trust-divider { + display: none; + width: 1px; + height: 48px; + background: var(--border); +} + +@media (min-width: 768px) { + .trust-divider { + display: block; + } + + .trust-grid { + flex-wrap: nowrap; + gap: 0; + } + + .trust-item { + padding-inline: 2rem; + } +} + +/* Sections */ +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-title { + margin-bottom: 0.75rem; +} + +.section-subtitle { + color: var(--text-muted); + font-size: 1.125rem; + max-width: 500px; + margin-inline: auto; +} + +/* Problem-Solution */ +.problem-solution { + padding-block: 6rem; +} + +.comparison-grid { + display: grid; + gap: 2rem; + max-width: 900px; + margin-inline: auto; +} + +@media (min-width: 768px) { + .comparison-grid { + grid-template-columns: 1fr 1fr; + } +} + +.comparison-card { + position: relative; + padding: 2rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); +} + +.comparison-card.problem { + background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--bg-card) 50%); +} + +.comparison-card.problem .comparison-icon { + color: #ef4444; +} + +.comparison-card.solution { + background: var(--gradient-subtle); + border-color: rgba(99, 102, 241, 0.3); + box-shadow: var(--shadow-glow); +} + +.comparison-card.solution .comparison-icon { + color: var(--primary); +} + +.comparison-badge { + position: absolute; + top: -12px; + inset-inline-start: 24px; + padding: 0.375rem 1rem; + background: var(--gradient); + color: white; + font-size: 0.75rem; + font-weight: 500; + border-radius: 100px; +} + +.comparison-icon { + width: 48px; + height: 48px; + margin-bottom: 1.5rem; +} + +.comparison-title { + margin-bottom: 1.5rem; +} + +.comparison-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.875rem; + margin-bottom: 2rem; +} + +.comparison-list li { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--text-muted); +} + +.comparison-list svg { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.comparison-card.problem .comparison-list svg { + color: #f87171; +} + +.comparison-card.solution .comparison-list svg { + color: var(--primary); +} + +.comparison-total { + padding-top: 1.5rem; + border-top: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; +} + +.total-label { + font-size: 0.875rem; + color: var(--text-muted); +} + +.total-value { + font-size: 1.25rem; + font-weight: 600; +} + +.total-value.highlight { + color: var(--primary); +} + +/* How It Works */ +.how-it-works { + padding-block: 6rem; + background: var(--bg-elevated); +} + +.steps-grid { + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: center; +} + +@media (min-width: 900px) { + .steps-grid { + flex-direction: row; + align-items: flex-start; + } +} + +.step-card { + flex: 1; + max-width: 320px; + text-align: center; + padding: 2rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); +} + +.step-number { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background: var(--gradient); + color: white; + font-size: 1.125rem; + font-weight: 600; + font-family: var(--font-english); + border-radius: 50%; + margin-bottom: 1.5rem; +} + +.step-icon { + width: 64px; + height: 64px; + margin-inline: auto; + margin-bottom: 1.5rem; + color: var(--accent); +} + +.step-title { + margin-bottom: 0.75rem; +} + +.step-desc { + color: var(--text-muted); + line-height: 1.7; +} + +.step-connector { + display: none; + width: 80px; + color: var(--border-light); + padding-top: 4rem; +} + +@media (min-width: 900px) { + .step-connector { + display: block; + } +} + +/* Features */ +.features { + padding-block: 6rem; +} + +.features-grid { + display: grid; + gap: 1.5rem; +} + +@media (min-width: 600px) { + .features-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 900px) { + .features-grid { + grid-template-columns: repeat(3, 1fr); + } + + .feature-card.feature-highlight { + grid-column: 1; + grid-row: 1; + background: var(--gradient-subtle); + border-color: rgba(99, 102, 241, 0.3); + } +} + +.feature-card { + padding: 2rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); +} + +.feature-card:hover { + border-color: rgba(99, 102, 241, 0.3); + transform: translateY(-4px); + box-shadow: var(--shadow-md); +} + +.feature-icon { + width: 48px; + height: 48px; + color: var(--primary); + margin-bottom: 1.25rem; +} + +.feature-title { + margin-bottom: 0.5rem; +} + +.feature-desc { + color: var(--text-muted); + line-height: 1.7; +} + +/* Pricing */ +.pricing { + padding-block: 6rem; + background: var(--bg-elevated); +} + +.pricing-grid { + display: grid; + gap: 2rem; + max-width: 1000px; + margin-inline: auto; +} + +@media (min-width: 768px) { + .pricing-grid { + grid-template-columns: repeat(3, 1fr); + align-items: start; + } +} + +.pricing-card { + position: relative; + padding: 2rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); +} + +.pricing-card.featured { + background: var(--gradient-subtle); + border-color: rgba(99, 102, 241, 0.3); + box-shadow: var(--shadow-glow); +} + +@media (min-width: 768px) { + .pricing-card.featured { + padding-block: 2.5rem; + margin-top: -0.5rem; + } +} + +.pricing-badge { + position: absolute; + top: -12px; + inset-inline-start: 50%; + transform: translateX(50%); + padding: 0.375rem 1rem; + background: var(--gradient); + color: white; + font-size: 0.75rem; + font-weight: 500; + border-radius: 100px; + white-space: nowrap; +} + +[dir="rtl"] .pricing-badge { + transform: translateX(50%); +} + +.pricing-header { + text-align: center; + padding-bottom: 1.5rem; + margin-bottom: 1.5rem; + border-bottom: 1px solid var(--border); +} + +.pricing-name { + font-size: 1.25rem; + margin-bottom: 0.75rem; +} + +.pricing-price { + display: flex; + align-items: baseline; + justify-content: center; + gap: 0.25rem; +} + +.price-currency { + font-size: 1.25rem; + font-weight: 500; + color: var(--text-muted); +} + +.price-amount { + font-size: 2.5rem; + font-weight: 600; + font-family: var(--font-english); +} + +.price-period { + font-size: 0.875rem; + color: var(--text-muted); +} + +.pricing-features { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.875rem; + margin-bottom: 2rem; +} + +.pricing-features li { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--text-muted); +} + +.pricing-features svg { + width: 20px; + height: 20px; + flex-shrink: 0; + color: var(--primary); +} + +/* Testimonials */ +.testimonials { + padding-block: 6rem; +} + +.testimonials-grid { + display: grid; + gap: 2rem; +} + +@media (min-width: 768px) { + .testimonials-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.testimonial-card { + padding: 2rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); +} + +.testimonial-content { + margin-bottom: 1.5rem; +} + +.quote-icon { + width: 32px; + height: 32px; + color: var(--primary); + opacity: 0.3; + margin-bottom: 1rem; +} + +.testimonial-text { + font-size: 1.0625rem; + color: var(--text); + line-height: 1.8; + font-style: normal; +} + +.testimonial-author { + display: flex; + align-items: center; + gap: 1rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border); +} + +.author-avatar { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--gradient); + color: white; + font-size: 0.875rem; + font-weight: 500; + border-radius: 50%; +} + +.author-info { + display: flex; + flex-direction: column; +} + +.author-name { + font-weight: 500; +} + +.author-role { + font-size: 0.875rem; + color: var(--text-muted); +} + +/* FAQ */ +.faq { + padding-block: 6rem; + background: var(--bg-elevated); +} + +.faq-list { + max-width: 700px; + margin-inline: auto; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.faq-item { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-md); + overflow: hidden; +} + +.faq-question { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.25rem 1.5rem; + background: none; + border: none; + cursor: pointer; + text-align: start; + font-family: var(--font-hebrew); + font-size: 1rem; + font-weight: 500; + color: var(--text); + transition: color var(--transition-fast); +} + +.faq-question:hover { + color: var(--primary); +} + +.faq-question:focus-visible { + outline: 2px solid var(--primary); + outline-offset: -2px; +} + +.faq-icon { + width: 24px; + height: 24px; + flex-shrink: 0; + color: var(--text-muted); + transition: transform var(--transition-base); +} + +.faq-question[aria-expanded="true"] .faq-icon { + transform: rotate(180deg); +} + +.faq-answer { + display: none; + padding: 0 1.5rem 1.25rem; +} + +.faq-answer p { + color: var(--text-muted); + line-height: 1.8; + max-width: 60ch; +} + +.faq-item.active .faq-answer { + display: block; +} + +/* Final CTA */ +.final-cta { + padding-block: 6rem; + background: + radial-gradient(ellipse 80% 50% at 50% 100%, rgba(99, 102, 241, 0.2) 0%, transparent 60%); +} + +.cta-content { + text-align: center; +} + +.cta-title { + margin-bottom: 0.75rem; +} + +.cta-subtitle { + color: var(--text-muted); + font-size: 1.125rem; + margin-bottom: 2rem; +} + +/* Footer */ +.footer { + padding-block: 4rem 2rem; + background: var(--bg); + border-top: 1px solid var(--border); +} + +.footer-grid { + display: grid; + gap: 3rem; + margin-bottom: 3rem; +} + +@media (min-width: 768px) { + .footer-grid { + grid-template-columns: 1fr 1.5fr; + gap: 4rem; + } +} + +.footer-brand .logo { + margin-bottom: 1rem; +} + +.footer-desc { + color: var(--text-muted); + max-width: 280px; +} + +.footer-form-wrapper { + background: var(--bg-card); + padding: 2rem; + border-radius: var(--radius-lg); + border: 1px solid var(--border); +} + +.footer-form-title { + margin-bottom: 1.5rem; + text-align: center; +} + +.lead-form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.form-row { + display: grid; + gap: 1rem; +} + +@media (min-width: 500px) { + .form-row { + grid-template-columns: 1fr 1fr; + } +} + +.form-group input { + width: 100%; + padding: 1rem 1.25rem; + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-md); + font-family: var(--font-hebrew); + font-size: 1rem; + color: var(--text); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.form-group input::placeholder { + color: var(--text-dim); +} + +.form-group input:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); +} + +.footer-bottom { + padding-top: 2rem; + border-top: 1px solid var(--border); + text-align: center; +} + +.footer-bottom p { + font-size: 0.875rem; + color: var(--text-dim); +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +@media (prefers-reduced-motion: reduce) { + .reveal { + opacity: 1; + transform: none; + } +} \ No newline at end of file