diff --git a/index.html b/index.html new file mode 100644 index 0000000..6a1360f --- /dev/null +++ b/index.html @@ -0,0 +1,453 @@ + + + + + + Emaillion Group | תשתיות AI ותקשורת לעסקים + + + + + + + + + + + + + + +
+ +
+ +
+
+
+
+
+
+
+

+ קבוצת Emaillion + תשתיות AI ותקשורת לעסקים מובילים +

+

+ פתרון all-in-one: מייל ארגוני, יצירת תוכן AI, תקשורת רב-ערוצית ו-SEO חכם — הכל תחת קורת גג אחת, עם ליווי ישראלי צמוד. +

+
+ קבעו פגישת היכרות + גלו את המוצרים +
+
+ +
+ +
+
+
+ המוצרים שלנו +

מותגי הקבוצה

+

חמישה פתרונות משלימים — אקוסיסטם שלם לניהול ותקשורת עסקית

+
+
+
+
+ +
+

Email Lion

+

מערכת webmail וניהול תיבות דוא"ל ארגוני — ממשק חכם, אבטחה מתקדמת, תמיכה בדומיינים מרובים.

+ למידע נוסף +
+
+
+ +
+

OwnAvatar

+

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

+ למידע נוסף +
+
+
+ +
+

Doali

+

פלטפורמת תקשורת רב-ערוצית: WhatsApp, SMS, שיחות AI, סקרים, חנות דיגיטלית ודפי נחיתה.

+ למידע נוסף +
+
+
+ +
+

SeoPush

+

כלי AI לכתיבת תוכן ואופטימיזציית SEO — דירוג גבוה יותר בגוגל, תנועה אורגנית איכותית.

+ למידע נוסף +
+
+
+ +
+

Emilio

+

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

+ למידע נוסף +
+
+
+
+ +
+
+
+ למה לבחור בנו +

היתרון שלנו

+
+
+
+
+ +
+

טכנולוגיה ישראלית

+

פיתוח מקומי, הבנה מעמיקה של השוק הישראלי, ועברית מושלמת בכל ממשק.

+
+
+
+ +
+

אבטחת מידע קפדנית

+

שרתים מאובטחים, הצפנה מקצה לקצה, ועמידה בתקני אבטחה מחמירים.

+
+
+
+ +
+

תמיכה אנושית 24/6

+

צוות מומחים זמין כמעט תמיד — מענה מהיר בעברית, אנשי מקצוע אמיתיים.

+
+
+
+ +
+

אינטגרציות מלאות

+

כל המוצרים מתחברים אחד לשני וליישומים חיצוניים — Zapier, CRM, ועוד.

+
+
+
+
+ +
+
+
+
+
+ [X]+ + עסקים פעילים +
+
+ 99.9% + זמינות שרתים +
+
+ 24/6 + תמיכה טכנית +
+
+ [X]+ + שנות ניסיון +
+
+
+

נותנים בנו אמון

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ איך זה עובד +

שלושה צעדים להתחלה

+
+
+
+
+ +
+
1
+

פגישת היכרות

+

נבין את הצרכים שלכם ונתאים חבילת פתרונות מדויקת.

+
+ +
+
+ +
+
2
+

הגדרה והטמעה

+

הצוות שלנו מגדיר את המערכות, מעביר הדרכה ומלווה.

+
+ +
+
+ +
+
3
+

צמיחה מתמשכת

+

אתם גדלים — אנחנו כאן עם תמיכה, עדכונים ופיצ'רים חדשים.

+
+
+
+
+ +
+
+
+ +
+

"עברנו ל-Emaillion לפני שנתיים והשינוי היה דרמטי. כל התקשורת העסקית שלנו — מייל, WhatsApp, SMS — מנוהלת ממקום אחד. התמיכה מעולה והמערכת פשוט עובדת."

+
+
+
+ +
+
+ [שם הלקוח] + [תפקיד, שם החברה] +
+
+

* עדות לקוח לדוגמה — תוחלף בעדות אמיתית

+
+
+
+ +
+
+
+
+ צרו קשר +

מוכנים להתחיל?

+

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

+
    +
  • + + ללא התחייבות +
    • +
  • + + הדגמה חינם +
    • +
  • + + מחירים שקופים +
    • +
+
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + +
+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5bbe66b --- /dev/null +++ b/script.js @@ -0,0 +1,223 @@ +(function() { + 'use strict'; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Intersection Observer for reveal animations + const revealElements = document.querySelectorAll('.reveal'); + + if ('IntersectionObserver' in window && !prefersReducedMotion) { + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(el => revealObserver.observe(el)); + } else { + revealElements.forEach(el => el.classList.add('visible')); + } + + // Header scroll effect + const header = document.querySelector('.site-header'); + + function handleScroll() { + const currentScroll = window.pageYOffset; + + if (currentScroll > 50) { + header.classList.add('scrolled'); + } else { + header.classList.remove('scrolled'); + } + } + + window.addEventListener('scroll', handleScroll, { passive: true }); + + // Mobile navigation toggle + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.querySelector('.nav-links'); + + if (navToggle && navLinks) { + navToggle.addEventListener('click', () => { + const isOpen = navLinks.classList.toggle('open'); + navToggle.setAttribute('aria-expanded', isOpen); + + const spans = navToggle.querySelectorAll('span'); + if (isOpen) { + spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)'; + spans[1].style.opacity = '0'; + spans[2].style.transform = 'rotate(-45deg) translate(5px, -5px)'; + document.body.style.overflow = 'hidden'; + } else { + spans[0].style.transform = ''; + spans[1].style.opacity = ''; + spans[2].style.transform = ''; + document.body.style.overflow = ''; + } + }); + + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navLinks.classList.remove('open'); + navToggle.setAttribute('aria-expanded', 'false'); + document.body.style.overflow = ''; + const spans = navToggle.querySelectorAll('span'); + spans[0].style.transform = ''; + spans[1].style.opacity = ''; + spans[2].style.transform = ''; + }); + }); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && navLinks.classList.contains('open')) { + navLinks.classList.remove('open'); + navToggle.setAttribute('aria-expanded', 'false'); + navToggle.focus(); + document.body.style.overflow = ''; + const spans = navToggle.querySelectorAll('span'); + spans[0].style.transform = ''; + spans[1].style.opacity = ''; + spans[2].style.transform = ''; + } + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + const headerHeight = header.offsetHeight; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + } + }); + }); + + // Form validation and submission + const contactForm = document.querySelector('.contact-form'); + + if (contactForm) { + const formStatus = contactForm.querySelector('.form-status'); + const nameInput = contactForm.querySelector('#name'); + const phoneInput = contactForm.querySelector('#phone'); + const emailInput = contactForm.querySelector('#email'); + + function validateField(input, errorId, validationFn, errorMessage) { + const errorEl = document.getElementById(errorId); + const isValid = validationFn(input.value.trim()); + + if (!isValid && input.value.trim() !== '') { + input.classList.add('invalid'); + errorEl.textContent = errorMessage; + return false; + } else { + input.classList.remove('invalid'); + errorEl.textContent = ''; + return isValid || input.value.trim() === ''; + } + } + + function validateName(value) { + return value.length >= 2; + } + + function validatePhone(value) { + return /^[\d\-+() ]{9,15}$/.test(value); + } + + function validateEmail(value) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); + } + + nameInput.addEventListener('blur', () => { + validateField(nameInput, 'name-error', validateName, 'נא להזין שם מלא'); + }); + + phoneInput.addEventListener('blur', () => { + validateField(phoneInput, 'phone-error', validatePhone, 'נא להזין מספר טלפון תקין'); + }); + + emailInput.addEventListener('blur', () => { + validateField(emailInput, 'email-error', validateEmail, 'נא להזין כתובת דוא"ל תקינה'); + }); + + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Clear previous status + formStatus.className = 'form-status'; + formStatus.textContent = ''; + + // Validate all fields + const isNameValid = validateField(nameInput, 'name-error', validateName, 'נא להזין שם מלא'); + const isPhoneValid = validateField(phoneInput, 'phone-error', validatePhone, 'נא להזין מספר טלפון תקין'); + const isEmailValid = validateField(emailInput, 'email-error', validateEmail, 'נא להזין כתובת דוא"ל תקינה'); + + if (!nameInput.value.trim() || !phoneInput.value.trim() || !emailInput.value.trim()) { + if (!nameInput.value.trim()) { + document.getElementById('name-error').textContent = 'שדה חובה'; + nameInput.classList.add('invalid'); + } + if (!phoneInput.value.trim()) { + document.getElementById('phone-error').textContent = 'שדה חובה'; + phoneInput.classList.add('invalid'); + } + if (!emailInput.value.trim()) { + document.getElementById('email-error').textContent = 'שדה חובה'; + emailInput.classList.add('invalid'); + } + return; + } + + if (!isNameValid || !isPhoneValid || !isEmailValid) { + return; + } + + const submitBtn = this.querySelector('button[type="submit"]'); + const originalText = submitBtn.textContent; + + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + + // Simulate form submission + setTimeout(() => { + formStatus.className = 'form-status success'; + formStatus.textContent = 'הפנייה נשלחה בהצלחה! נחזור אליכם בהקדם.'; + submitBtn.textContent = originalText; + submitBtn.disabled = false; + submitBtn.setAttribute('aria-busy', 'false'); + + this.reset(); + + // Clear error states + [nameInput, phoneInput, emailInput].forEach(input => { + input.classList.remove('invalid'); + }); + document.querySelectorAll('.field-error').forEach(el => el.textContent = ''); + + // Hide success message after 5 seconds + setTimeout(() => { + formStatus.className = 'form-status'; + formStatus.textContent = ''; + }, 5000); + }, 1500); + }); + } + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..919d22c --- /dev/null +++ b/style.css @@ -0,0 +1,1216 @@ +:root { + --bg-primary: #0a0a0f; + --bg-secondary: #12121a; + --bg-tertiary: #1a1a24; + --text-primary: #f5f5f7; + --text-secondary: #a0a0ab; + --text-muted: #6b6b78; + --gold: #d4af37; + --gold-light: #f0d875; + --gold-dark: #b8972f; + --accent: #4a7fff; + --accent-light: #6b9aff; + --border: rgba(255, 255, 255, 0.08); + --border-hover: rgba(255, 255, 255, 0.15); + --error: #ef4444; + --success: #22c55e; + --font-hebrew: 'Heebo', sans-serif; + --font-latin: 'Inter', sans-serif; + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); +} + +*, *::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; + } + .rotate-slow, + .rotate-reverse, + .pulse { + animation: none !important; + } +} + +body { + font-family: var(--font-hebrew); + font-size: 1rem; + line-height: 1.7; + color: var(--text-primary); + background: var(--bg-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +::selection { + background: var(--gold); + color: var(--bg-primary); +} + +.skip-link { + position: absolute; + top: -100%; + inset-inline-start: 1rem; + background: var(--gold); + color: var(--bg-primary); + padding: 0.75rem 1.5rem; + border-radius: 8px; + font-weight: 600; + z-index: 9999; + transition: top 0.3s var(--ease-out); +} + +.skip-link:focus { + top: 1rem; +} + +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; +} + +a { + color: inherit; + text-decoration: none; + transition: color 0.25s var(--ease-out); +} + +a:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 3px; + border-radius: 4px; +} + +img, svg { + display: block; + max-width: 100%; +} + +button { + font-family: inherit; + cursor: pointer; + border: none; + background: none; +} + +button:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 3px; + border-radius: 4px; +} + +h1, h2, h3, h4 { + font-weight: 600; + line-height: 1.2; + letter-spacing: -0.01em; +} + +h1 { + font-size: clamp(2.25rem, 5vw, 3.5rem); +} + +h2 { + font-size: clamp(1.75rem, 4vw, 2.5rem); +} + +h3 { + font-size: clamp(1.125rem, 2.5vw, 1.375rem); + font-weight: 500; +} + +h4 { + font-size: 1rem; + font-weight: 500; +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + inset-inline-start: 0; + inset-inline-end: 0; + z-index: 1000; + padding: 1rem 0; + background: linear-gradient(to bottom, var(--bg-primary), transparent); + transition: background 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out); +} + +.site-header.scrolled { + background: rgba(10, 10, 15, 0.9); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.logo-text { + font-size: 1.25rem; + font-weight: 600; + letter-spacing: -0.02em; +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; + list-style: none; +} + +.nav-links a { + font-size: 0.9375rem; + font-weight: 500; + color: var(--text-secondary); + transition: color 0.25s var(--ease-out); +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--text-primary); +} + +.nav-cta { + padding: 0.625rem 1.25rem; + background: var(--gold); + color: var(--bg-primary) !important; + border-radius: 8px; + font-weight: 600; + transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); +} + +.nav-cta:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3); +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + padding: 8px; +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--text-primary); + transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + font-size: 1rem; + font-weight: 600; + border-radius: 12px; + transition: all 0.3s var(--ease-out); +} + +.btn:focus-visible { + outline: 3px solid var(--gold-light); + outline-offset: 3px; +} + +.btn-primary { + background: linear-gradient(135deg, var(--gold), var(--gold-dark)); + color: var(--bg-primary); + box-shadow: 0 4px 20px rgba(212, 175, 55, 0.25); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 32px rgba(212, 175, 55, 0.4); +} + +.btn-primary:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; +} + +.btn-secondary { + background: transparent; + color: var(--text-primary); + border: 1px solid var(--border-hover); +} + +.btn-secondary:hover { + background: var(--bg-tertiary); + border-color: var(--gold); + color: var(--gold); +} + +.btn-full { + width: 100%; +} + +/* Hero Section */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + padding: 8rem 0 4rem; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + pointer-events: none; +} + +.hero-grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(var(--border) 1px, transparent 1px), + linear-gradient(90deg, var(--border) 1px, transparent 1px); + background-size: 60px 60px; + mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); + -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); +} + +.hero-glow { + position: absolute; + top: 20%; + inset-inline-end: 10%; + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 60%); + filter: blur(60px); +} + +.hero-content { + position: relative; + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; + flex: 1; +} + +.hero-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: var(--gold); + letter-spacing: 0.02em; + margin-bottom: 1rem; +} + +.hero h1 { + max-width: 700px; + margin-bottom: 1.5rem; +} + +.hero-sub { + max-width: 560px; + font-size: 1.125rem; + color: var(--text-secondary); + margin-bottom: 2.5rem; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.hero-visual { + position: absolute; + inset-inline-start: 5%; + top: 50%; + transform: translateY(-50%); + width: 400px; + height: 400px; + opacity: 0.8; +} + +.hero-shape { + width: 100%; + height: 100%; +} + +.rotate-slow { + animation: rotateSlow 30s linear infinite; + transform-origin: center; +} + +.rotate-reverse { + animation: rotateSlow 25s linear infinite reverse; + transform-origin: center; +} + +@keyframes rotateSlow { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.pulse { + animation: pulse 3s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 0.6; } + 50% { opacity: 1; } +} + +/* Section Styling */ +section { + padding: 6rem 0; +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-label { + display: inline-block; + font-size: 0.8125rem; + font-weight: 500; + color: var(--gold); + letter-spacing: 0.02em; + margin-bottom: 0.75rem; +} + +.section-header p { + max-width: 540px; + margin: 1rem auto 0; + color: var(--text-secondary); +} + +/* Products Section */ +.products { + background: var(--bg-secondary); +} + +.products-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 1.5rem; +} + +.product-card { + position: relative; + padding: 2rem; + background: var(--bg-primary); + border: 1px solid var(--border); + border-radius: 16px; + grid-column: span 2; + transition: transform 0.4s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.4s var(--ease-out); +} + +.product-card--large { + grid-column: span 3; +} + +.product-card:hover { + transform: translateY(-8px); + border-color: var(--gold); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); +} + +.product-icon { + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, var(--gold), var(--gold-dark)); + border-radius: 14px; + margin-bottom: 1.5rem; + color: var(--bg-primary); +} + +.product-icon.accent { + background: linear-gradient(135deg, var(--accent), var(--accent-light)); +} + +.product-icon svg { + width: 28px; + height: 28px; +} + +.product-card h3 { + margin-bottom: 0.75rem; +} + +.product-card p { + color: var(--text-secondary); + font-size: 0.9375rem; + margin-bottom: 1.5rem; + max-width: 32ch; +} + +.product-card--large p { + max-width: 48ch; +} + +.product-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--gold); + transition: gap 0.3s var(--ease-out); +} + +.product-link:hover { + gap: 0.75rem; +} + +.link-arrow::after { + content: '←'; + display: inline-block; + transition: transform 0.3s var(--ease-out); +} + +.product-link:hover .link-arrow::after { + transform: translateX(-4px); +} + +/* Why Section */ +.why-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 1.5rem; +} + +.why-card { + position: relative; + padding: 2rem; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 16px; + grid-column: span 3; + transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); +} + +.why-card--primary { + grid-column: span 6; + background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02)); + border-color: rgba(212, 175, 55, 0.2); +} + +.why-card:hover { + border-color: var(--gold); + transform: translateY(-4px); +} + +.why-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.25rem; + color: var(--gold); +} + +.why-icon svg { + width: 40px; + height: 40px; +} + +.why-card h3 { + margin-bottom: 0.75rem; +} + +.why-card p { + font-size: 0.9375rem; + color: var(--text-secondary); + max-width: 36ch; +} + +.why-card--primary p { + max-width: 48ch; +} + +/* Trust Section */ +.trust { + background: var(--bg-secondary); + padding: 4rem 0; +} + +.trust-content { + display: flex; + flex-direction: column; + gap: 4rem; +} + +.trust-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; + text-align: center; +} + +.stat { + display: flex; + flex-direction: column; +} + +.stat-number { + font-family: var(--font-latin); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 600; + color: var(--gold); + line-height: 1; + margin-bottom: 0.5rem; +} + +.stat-label { + font-size: 0.9375rem; + color: var(--text-secondary); +} + +.trust-label { + text-align: center; + font-size: 0.875rem; + color: var(--text-muted); + letter-spacing: 0.02em; + margin-bottom: 1.5rem; +} + +.logo-placeholder-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 1.5rem; + justify-items: center; + align-items: center; +} + +.logo-placeholder { + width: 100%; + max-width: 100px; + height: 40px; + background: var(--bg-tertiary); + border: 1px dashed var(--border-hover); + border-radius: 8px; + opacity: 0.6; +} + +/* How Section */ +.steps { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 0; +} + +.step { + flex: 1; + max-width: 280px; + text-align: center; + position: relative; +} + +.step-icon { + width: 72px; + height: 72px; + margin: 0 auto 1.5rem; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-secondary); + border: 2px solid var(--border); + border-radius: 20px; + color: var(--gold); + transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); +} + +.step:hover .step-icon { + border-color: var(--gold); + transform: scale(1.05); +} + +.step-icon svg { + width: 32px; + height: 32px; +} + +.step-number { + position: absolute; + top: 0; + inset-inline-end: calc(50% - 60px); + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: var(--gold); + color: var(--bg-primary); + font-family: var(--font-latin); + font-size: 0.8125rem; + font-weight: 600; + border-radius: 50%; +} + +.step h3 { + margin-bottom: 0.75rem; +} + +.step p { + font-size: 0.9375rem; + color: var(--text-secondary); + max-width: 28ch; + margin-inline: auto; +} + +.step-connector { + width: 60px; + height: 2px; + background: linear-gradient(90deg, var(--border), var(--gold), var(--border)); + margin-top: 36px; + flex-shrink: 0; +} + +/* Testimonial Section */ +.testimonial { + background: var(--bg-secondary); +} + +.testimonial-card { + max-width: 700px; + margin: 0 auto; + padding: 3rem; + background: var(--bg-primary); + border: 1px solid var(--border); + border-radius: 20px; + text-align: center; + position: relative; +} + +.quote-icon { + width: 48px; + height: 48px; + margin: 0 auto 1.5rem; +} + +.testimonial-card blockquote p { + font-size: 1.125rem; + line-height: 1.8; + color: var(--text-primary); + margin-bottom: 2rem; + max-width: 52ch; + margin-inline: auto; +} + +.testimonial-author { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.author-avatar { + width: 48px; + height: 48px; + background: var(--bg-tertiary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--gold); +} + +.author-avatar svg { + width: 40px; + height: 40px; +} + +.author-info { + text-align: start; +} + +.author-info strong { + display: block; + font-weight: 500; +} + +.author-info span { + font-size: 0.875rem; + color: var(--text-secondary); +} + +.testimonial-placeholder-note { + margin-top: 1.5rem; + font-size: 0.75rem; + color: var(--text-muted); + font-style: italic; +} + +/* Contact Section */ +.contact { + position: relative; +} + +.contact::before { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + inset-inline-end: 0; + height: 50%; + background: var(--bg-secondary); + z-index: -1; +} + +.contact-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: start; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: 24px; + padding: 3rem; +} + +.contact-info h2 { + margin-bottom: 1rem; +} + +.contact-info > p { + color: var(--text-secondary); + margin-bottom: 2rem; +} + +.contact-features { + display: flex; + flex-direction: column; + gap: 1rem; + list-style: none; +} + +.contact-feature { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--text-secondary); + font-size: 0.9375rem; +} + +.contact-feature svg { + width: 20px; + height: 20px; + color: var(--gold); + flex-shrink: 0; +} + +.contact-form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.form-status { + display: none; + padding: 1rem; + border-radius: 10px; + font-size: 0.9375rem; + font-weight: 500; +} + +.form-status.success { + display: block; + background: rgba(34, 197, 94, 0.1); + border: 1px solid var(--success); + color: var(--success); +} + +.form-status.error { + display: block; + background: rgba(239, 68, 68, 0.1); + border: 1px solid var(--error); + color: var(--error); +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.form-group label { + font-size: 0.875rem; + font-weight: 500; + color: var(--text-secondary); +} + +.required { + color: var(--error); +} + +.form-group input, +.form-group textarea { + padding: 0.875rem 1rem; + font-family: var(--font-hebrew); + font-size: 1rem; + color: var(--text-primary); + background: var(--bg-primary); + border: 1px solid var(--border); + border-radius: 10px; + transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); +} + +.form-group input[dir="ltr"] { + text-align: left; + font-family: var(--font-latin); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--gold); + box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); +} + +.form-group input.invalid, +.form-group textarea.invalid { + border-color: var(--error); +} + +.form-group input.invalid:focus, +.form-group textarea.invalid:focus { + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.field-error { + font-size: 0.8125rem; + color: var(--error); + min-height: 1.2em; +} + +/* Footer */ +.site-footer { + padding: 4rem 0 2rem; + background: var(--bg-secondary); + border-top: 1px solid var(--border); +} + +.footer-grid { + display: grid; + grid-template-columns: 1.5fr 1fr 1fr 1fr; + gap: 3rem; + margin-bottom: 3rem; +} + +.footer-brand p { + margin-top: 1rem; + font-size: 0.9375rem; + color: var(--text-secondary); + max-width: 280px; +} + +.footer-nav h4, +.footer-social h4 { + color: var(--text-muted); + font-size: 0.8125rem; + font-weight: 500; + letter-spacing: 0.02em; + margin-bottom: 1.25rem; +} + +.footer-nav ul { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.footer-nav a { + font-size: 0.9375rem; + color: var(--text-secondary); +} + +.footer-nav a:hover { + color: var(--gold); +} + +.social-links { + display: flex; + gap: 1rem; +} + +.social-links a { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-tertiary); + border-radius: 10px; + color: var(--text-secondary); + transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out); +} + +.social-links a:hover { + background: var(--gold); + color: var(--bg-primary); +} + +.social-links svg { + width: 20px; + height: 20px; +} + +.footer-bottom { + padding-top: 2rem; + border-top: 1px solid var(--border); + text-align: center; +} + +.footer-bottom p { + font-size: 0.9375rem; + color: var(--text-muted); +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* Responsive */ +@media (max-width: 1024px) { + .hero-visual { + display: none; + } + + .products-grid { + grid-template-columns: repeat(2, 1fr); + } + + .product-card { + grid-column: span 1; + } + + .product-card--large { + grid-column: span 1; + } + + .product-card:last-child { + grid-column: 1 / -1; + max-width: 400px; + justify-self: center; + } + + .why-grid { + grid-template-columns: repeat(2, 1fr); + } + + .why-card { + grid-column: span 1; + } + + .why-card--primary { + grid-column: span 1; + } + + .footer-grid { + grid-template-columns: 1fr 1fr; + gap: 2rem; + } +} + +@media (max-width: 768px) { + section { + padding: 4rem 0; + } + + .nav-toggle { + display: flex; + } + + .nav-links { + position: fixed; + top: 0; + inset-inline-end: 0; + bottom: 0; + width: 280px; + flex-direction: column; + align-items: stretch; + padding: 6rem 2rem 2rem; + background: var(--bg-secondary); + border-inline-start: 1px solid var(--border); + transform: translateX(100%); + transition: transform 0.4s var(--ease-out); + gap: 1rem; + } + + [dir="rtl"] .nav-links { + transform: translateX(-100%); + } + + .nav-links.open { + transform: translateX(0); + } + + .nav-links a { + padding: 1rem; + font-size: 1rem; + } + + .nav-cta { + text-align: center; + } + + .hero { + min-height: auto; + padding: 7rem 0 4rem; + } + + .hero-actions { + flex-direction: column; + } + + .hero-actions .btn { + width: 100%; + } + + .products-grid { + grid-template-columns: 1fr; + } + + .product-card, + .product-card--large, + .product-card:last-child { + grid-column: span 1; + max-width: none; + } + + .why-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .why-card, + .why-card--primary { + grid-column: span 1; + } + + .trust-stats { + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + } + + .logo-placeholder-grid { + grid-template-columns: repeat(3, 1fr); + } + + .steps { + flex-direction: column; + gap: 2rem; + align-items: center; + } + + .step { + max-width: 100%; + } + + .step-connector { + width: 2px; + height: 40px; + margin: 0; + background: linear-gradient(to bottom, var(--border), var(--gold), var(--border)); + } + + .step-number { + inset-inline-end: auto; + inset-inline-start: calc(50% + 32px); + } + + .contact-wrapper { + grid-template-columns: 1fr; + gap: 2.5rem; + padding: 2rem; + } + + .footer-grid { + grid-template-columns: 1fr; + text-align: center; + } + + .footer-brand p { + max-width: 100%; + } + + .footer-brand .logo { + justify-content: center; + } + + .social-links { + justify-content: center; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 1rem; + } + + .product-card { + padding: 1.5rem; + } + + .testimonial-card { + padding: 2rem 1.5rem; + } + + .testimonial-card blockquote p { + font-size: 1rem; + } +} \ No newline at end of file