diff --git a/index.html b/index.html new file mode 100644 index 0000000..a2204b0 --- /dev/null +++ b/index.html @@ -0,0 +1,495 @@ + + + + + + + Emilio | ה-CEO הדיגיטלי שלך — דירקטוריון AI עם בקרה אנושית מלאה + + + + + + + + + + + + + + + + +
+
+ + + התחילו בחינם + +
+ +
+ +
+ +
+
+
+
+

+ בעלי עסקים בישראל,
+ הכירו את ה-CEO הדיגיטלי
+ שלא ישן +

+

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

+
+ + התחילו ניסיון חינם 14 יום + בלי כרטיס אשראי + + + + צפו בדמו קצר + +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ שיווק + מוכן לשליחה — ממתין לאישור +
+
+ אשר +
+
+
+
+ +
+
+ דוח כספי + הופק ונשלח — אושר אתמול +
+
✓
+
+
+
+
+
+
+ +
+ + +
+
+
+

איך זה עובד?

+

שלושה צעדים פשוטים מהמטרה שלכם לתוצאה בשטח

+
+
+
+
1
+
+ +
+

תארו מטרה עסקית

+

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

+
+ +
+
2
+
+ +
+

Emilio מכין הצעה

+

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

+
+ +
+
3
+
+ +
+

אתם מאשרים — רק אז זה קורה

+

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

+
+
+
+
+ + +
+
+
+

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

+
+
+
+
+ +
+
+

אוטומציה עם בקרה אנושית מלאה

+

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

+
+
+
+
+ +
+

חיסכון של עשרות שעות בחודש

+

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

+
+
+
+ +
+

שילוב מובנה עם המערכות שלכם

+

מחובר מראש ל-Email Lion, OwnAvatar, Doali ו-WHMCS/ClientsCenter — בלי הגדרות מסובכות.

+
+
+
+ +
+

מעקב KPI והכנסות בזמן אמת

+

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

+
+
+
+ +
+

לוח בקרה מרכזי אחד

+

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

+
+
+
+ +
+

אבטחה והצפנה ברמה גבוהה

+

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

+
+
+
+
+ + +
+
+
+

הדירקטוריון הדיגיטלי שלכם

+

שישה סוכני AI מתמחים שעובדים יחד תחת פיקוח Emilio

+
+
+
+
+ +
+

שיווק

+

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

+
+
+
+ +
+

מכירות ו-CRM

+

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

+
+
+
+ +
+

תמיכה

+

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

+
+
+
+ +
+

כספים ודוחות

+

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

+
+
+
+ +
+

תפעול

+

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

+
+
+
+ +
+

בניית אתרים

+

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

+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+

אין קופסה שחורה — רק שקיפות מלאה

+

+ אנחנו מבינים שלהפקיד החלטות עסקיות ב-AI זה צעד גדול. לכן בנינו את Emilio עם עקרון אחד ברור: אין פעולה רגישה בלי אישור אנושי מפורש. +

+
    +
  • + + שליחת מיילים, SMS או הודעות וואטסאפ — רק אחרי שאישרתם +
    • +
  • + + שינויי תקציב פרסום — רק אחרי שאישרתם +
    • +
  • + + מחיקת מידע או קבצים — רק אחרי שאישרתם +
    • +
  • + + פרסום חיצוני של תוכן — רק אחרי שאישרתם +
    • +
+

ה-AI עובד, אתם מחליטים. פשוט.

+
+
+
+
+ + +
+
+
+
+

מוכנים לפגוש את ה-CEO הדיגיטלי שלכם?

+

התחילו ניסיון חינם של 14 יום — ללא כרטיס אשראי, ללא התחייבות.

+
+
+
+
+ + + נא להזין שם מלא +
+
+ + + נא להזין כתובת אימייל תקינה +
+
+ + + נא להזין מספר טלפון תקין +
+
+ + + נא להזין שם העסק +
+
+ +

לא נשתף את הפרטים שלכם עם אף גורם חיצוני.

+
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..3418189 --- /dev/null +++ b/script.js @@ -0,0 +1,238 @@ +(function() { + 'use strict'; + + // ===== Mobile Menu Toggle ===== + const mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); + const mobileNav = document.querySelector('.mobile-nav'); + + if (mobileMenuToggle && mobileNav) { + mobileMenuToggle.addEventListener('click', function() { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + mobileNav.hidden = isExpanded; + }); + + // Close mobile menu when clicking a link + mobileNav.querySelectorAll('a').forEach(link => { + link.addEventListener('click', function() { + mobileMenuToggle.setAttribute('aria-expanded', 'false'); + mobileNav.hidden = true; + }); + }); + + // Close mobile menu on Escape key + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && !mobileNav.hidden) { + mobileMenuToggle.setAttribute('aria-expanded', 'false'); + mobileNav.hidden = true; + mobileMenuToggle.focus(); + } + }); + } + + // ===== Reduced Motion Check ===== + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + + // ===== Scroll Reveal Animation ===== + const revealElements = document.querySelectorAll('.reveal'); + + if ('IntersectionObserver' in window && !prefersReducedMotion.matches) { + 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 { + // Fallback for older browsers or reduced motion preference + revealElements.forEach(el => el.classList.add('visible')); + } + + // ===== Smooth Scroll for Navigation ===== + document.querySelectorAll('a[href^="#"]').forEach(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('.site-header').offsetHeight; + const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion.matches ? 'auto' : 'smooth' + }); + + // Set focus to target for accessibility + targetElement.setAttribute('tabindex', '-1'); + targetElement.focus({ preventScroll: true }); + } + }); + }); + + // ===== Form Handling ===== + const leadForm = document.getElementById('leadForm'); + const formSuccess = document.getElementById('formSuccess'); + + if (leadForm && formSuccess) { + leadForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Basic validation + const inputs = this.querySelectorAll('input[required]'); + let isValid = true; + + inputs.forEach(input => { + input.classList.remove('error'); + if (!input.value.trim()) { + isValid = false; + input.classList.add('error'); + } + }); + + // Email validation + const emailInput = document.getElementById('email'); + if (emailInput && emailInput.value) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(emailInput.value)) { + isValid = false; + emailInput.classList.add('error'); + } + } + + // Phone validation (basic Israeli format) + const phoneInput = document.getElementById('phone'); + if (phoneInput && phoneInput.value) { + const phoneRegex = /^[\d\-\+\s\(\)]{9,}$/; + if (!phoneRegex.test(phoneInput.value)) { + isValid = false; + phoneInput.classList.add('error'); + } + } + + if (isValid) { + // Simulate form submission + const submitBtn = this.querySelector('.btn-submit'); + const originalText = submitBtn.innerHTML; + submitBtn.disabled = true; + submitBtn.innerHTML = 'שולח...'; + + setTimeout(() => { + leadForm.hidden = true; + formSuccess.hidden = false; + // Announce to screen readers + formSuccess.focus(); + }, 1000); + } else { + // Focus first error field + const firstError = this.querySelector('.error'); + if (firstError) { + firstError.focus(); + } + } + }); + + // Clear error styling on input + leadForm.querySelectorAll('input').forEach(input => { + input.addEventListener('input', function() { + this.classList.remove('error'); + }); + }); + } + + // ===== Header Background on Scroll ===== + const header = document.querySelector('.site-header'); + let lastScroll = 0; + let ticking = false; + + function updateHeader() { + const currentScroll = window.pageYOffset; + + if (currentScroll > 50) { + header.style.boxShadow = 'var(--shadow)'; + } else { + header.style.boxShadow = 'none'; + } + + lastScroll = currentScroll; + ticking = false; + } + + window.addEventListener('scroll', function() { + if (!ticking) { + requestAnimationFrame(updateHeader); + ticking = true; + } + }, { passive: true }); + + // ===== Dashboard Card Animation ===== + if (!prefersReducedMotion.matches) { + const pendingCard = document.querySelector('.dash-card.pending'); + + if (pendingCard) { + let pulseInterval; + + const startPulse = () => { + pendingCard.style.transition = 'box-shadow 0.5s ease'; + let isPulsing = true; + + pulseInterval = setInterval(() => { + if (isPulsing) { + pendingCard.style.boxShadow = '0 0 0 3px rgba(217, 119, 6, 0.3)'; + } else { + pendingCard.style.boxShadow = 'none'; + } + isPulsing = !isPulsing; + }, 1000); + }; + + // Start pulse animation when hero is visible + const heroObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + startPulse(); + } else { + clearInterval(pulseInterval); + if (pendingCard) { + pendingCard.style.boxShadow = 'none'; + } + } + }); + }); + + const heroSection = document.querySelector('.hero'); + if (heroSection) { + heroObserver.observe(heroSection); + } + } + } + + // ===== Shield Pulse Animation — only when visible ===== + if (!prefersReducedMotion.matches) { + const trustVisual = document.querySelector('.trust-visual'); + + if (trustVisual) { + const trustObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } else { + entry.target.classList.remove('visible'); + } + }); + }, { threshold: 0.5 }); + + trustObserver.observe(trustVisual); + } + } + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0c2e2ee --- /dev/null +++ b/style.css @@ -0,0 +1,1278 @@ +/* ===== CSS Custom Properties ===== */ +:root { + /* Colors */ + --color-primary-dark: #1a1f4e; + --color-primary: #2d3580; + --color-primary-light: #4f46e5; + --color-accent: #c96c00; + --color-accent-light: #f59e0b; + --color-accent-hover: #a85800; + --color-success: #10b981; + --color-error: #dc2626; + --color-text: #1f2937; + --color-text-muted: #4b5563; + --color-bg: #ffffff; + --color-bg-alt: #f9fafb; + --color-bg-dark: #f3f4f6; + --color-border: #e5e7eb; + + /* Agent Colors */ + --color-agent-marketing: #db2777; + --color-agent-sales: #7c3aed; + --color-agent-support: #059669; + --color-agent-finance: #d97706; + --color-agent-operations: #2563eb; + --color-agent-web: #4f46e5; + + /* Typography */ + --font-display: 'Rubik', sans-serif; + --font-body: 'Heebo', sans-serif; + + /* Type Scale */ + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + --text-5xl: 3rem; + --text-6xl: 3.75rem; + + /* Spacing */ + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-8: 2rem; + --space-10: 2.5rem; + --space-12: 3rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + + /* Layout */ + --container-max: 1200px; + --header-height: 72px; + + /* Effects */ + --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); + --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); + --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); + --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); + --radius-sm: 4px; + --radius: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-full: 9999px; + + /* Transitions */ + --transition-fast: 150ms ease; + --transition: 250ms ease; + --transition-slow: 400ms ease; +} + +/* ===== Reset & Base ===== */ +*, *::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-body); + font-size: var(--text-base); + font-weight: 400; + line-height: 1.7; + color: var(--color-text); + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Hebrew font-weight safety: cap at 600 maximum */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.3; + color: var(--color-primary-dark); +} + +/* Defensive: ensure no Hebrew text exceeds 600 weight */ +[lang="he"] * { + font-weight: inherit; +} + +strong, b { + font-weight: 600; +} + +a { + color: var(--color-primary-light); + text-decoration: none; + transition: color var(--transition-fast); +} + +a:hover { + color: var(--color-primary-dark); +} + +a:focus-visible { + outline: 3px solid var(--color-accent-light); + outline-offset: 2px; + border-radius: var(--radius-sm); +} + +img, svg { + display: block; + max-width: 100%; +} + +ul, ol { + list-style: none; +} + +button { + font-family: inherit; + cursor: pointer; + border: none; + background: none; +} + +button:focus-visible { + outline: 3px solid var(--color-accent-light); + outline-offset: 2px; +} + +input, textarea, select { + font-family: inherit; + font-size: inherit; +} + +/* ===== Utility Classes ===== */ +.container { + width: 100%; + max-width: var(--container-max); + margin-inline: auto; + padding-inline: var(--space-6); +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + border: 0; +} + +/* ===== Skip Link ===== */ +.skip-link { + position: absolute; + top: -100%; + inset-inline-end: var(--space-4); + z-index: 9999; + padding: var(--space-3) var(--space-6); + background: var(--color-primary-dark); + color: #fff; + font-weight: 500; + border-radius: 0 0 var(--radius) var(--radius); + transition: top var(--transition-fast); +} + +.skip-link:focus { + top: 0; + outline: none; + color: #fff; +} + +/* ===== Reveal Animations ===== */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity var(--transition-slow), transform var(--transition-slow); +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +.reveal-delay-1 { transition-delay: 100ms; } +.reveal-delay-2 { transition-delay: 200ms; } +.reveal-delay-3 { transition-delay: 300ms; } + +/* ===== Buttons ===== */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-6); + font-family: var(--font-display); + font-weight: 500; + font-size: var(--text-base); + line-height: 1.4; + text-align: center; + border-radius: var(--radius); + transition: all var(--transition-fast); + white-space: nowrap; +} + +.btn:focus-visible { + outline: 3px solid var(--color-primary-dark); + outline-offset: 2px; +} + +.btn-primary { + background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); + color: #fff; + box-shadow: var(--shadow), 0 4px 14px rgba(201, 108, 0, 0.35); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg), 0 6px 20px rgba(201, 108, 0, 0.4); + color: #fff; +} + +.btn-secondary { + background: var(--color-bg); + color: var(--color-primary-dark); + border: 2px solid var(--color-border); +} + +.btn-secondary:hover { + border-color: var(--color-primary-light); + color: var(--color-primary-light); +} + +.btn-sm { + padding: var(--space-2) var(--space-4); + font-size: var(--text-sm); +} + +.btn-lg { + padding: var(--space-4) var(--space-8); + font-size: var(--text-lg); +} + +.btn-sub { + display: block; + font-size: var(--text-sm); + opacity: 1; + font-weight: 400; +} + +.btn-icon { + width: 18px; + height: 18px; +} + +/* ===== Header ===== */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--color-border); + height: var(--header-height); +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.logo-text { + font-family: var(--font-display); + font-size: var(--text-xl); + font-weight: 600; + color: var(--color-primary-dark); +} + +.main-nav { + display: none; +} + +.nav-list { + display: flex; + gap: var(--space-8); +} + +.nav-list a { + font-size: var(--text-sm); + font-weight: 500; + color: var(--color-text-muted); + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); +} + +.nav-list a:hover { + color: var(--color-primary-dark); +} + +.header-cta { + display: none; +} + +.mobile-menu-toggle { + display: flex; + flex-direction: column; + gap: 5px; + padding: var(--space-2); +} + +.mobile-menu-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--color-primary-dark); + transition: var(--transition-fast); +} + +.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +.mobile-nav { + position: absolute; + top: 100%; + inset-inline: 0; + background: var(--color-bg); + border-bottom: 1px solid var(--color-border); + padding: var(--space-6); + box-shadow: var(--shadow-lg); +} + +.mobile-nav[hidden] { + display: none; +} + +.mobile-nav-list { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.mobile-nav-list a { + display: block; + padding: var(--space-2) 0; + font-size: var(--text-lg); + color: var(--color-text); +} + +.mobile-nav-list .btn { + margin-top: var(--space-4); + text-align: center; +} + +@media (min-width: 768px) { + .main-nav { + display: block; + } + + .header-cta { + display: inline-flex; + } + + .mobile-menu-toggle, + .mobile-nav { + display: none !important; + } +} + +/* ===== Hero ===== */ +.hero { + position: relative; + padding-top: calc(var(--header-height) + var(--space-12)); + padding-bottom: var(--space-16); + min-height: 100vh; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + background: + radial-gradient(ellipse 80% 50% at 20% 20%, rgba(79, 70, 229, 0.08) 0%, transparent 50%), + radial-gradient(ellipse 60% 40% at 80% 80%, rgba(201, 108, 0, 0.06) 0%, transparent 50%), + linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%); + z-index: -1; +} + +.hero-content { + flex: 1; + display: grid; + gap: var(--space-12); + align-items: center; +} + +.hero-title { + font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); + font-weight: 600; + line-height: 1.2; + margin-bottom: var(--space-6); +} + +.hero-title .highlight { + background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-subtitle { + font-size: var(--text-lg); + color: var(--color-text-muted); + max-width: 520px; + margin-bottom: var(--space-8); +} + +.hero-ctas { + display: flex; + flex-wrap: wrap; + gap: var(--space-4); +} + +.hero-ctas .btn-primary { + flex-direction: column; + padding: var(--space-4) var(--space-8); +} + +/* Dashboard Preview */ +.hero-visual { + display: none; +} + +.dashboard-preview { + background: var(--color-bg); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); + overflow: hidden; + border: 1px solid var(--color-border); +} + +.dashboard-header { + display: flex; + gap: var(--space-2); + padding: var(--space-4); + background: var(--color-bg-dark); + border-bottom: 1px solid var(--color-border); +} + +.dashboard-dot { + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--color-border); +} + +.dashboard-dot:first-child { background: #ef4444; } +.dashboard-dot:nth-child(2) { background: #f59e0b; } +.dashboard-dot:nth-child(3) { background: #10b981; } + +.dashboard-content { + display: flex; + min-height: 280px; +} + +.dash-sidebar { + width: 60px; + background: var(--color-primary-dark); + padding: var(--space-4) var(--space-2); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-3); +} + +.dash-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); + margin-bottom: var(--space-4); +} + +.dash-nav-item { + width: 36px; + height: 36px; + border-radius: var(--radius); + background: rgba(255,255,255,0.1); + transition: var(--transition-fast); +} + +.dash-nav-item.active { + background: rgba(255,255,255,0.25); +} + +.dash-main { + flex: 1; + padding: var(--space-6); + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.dash-card { + display: flex; + align-items: center; + gap: var(--space-4); + padding: var(--space-4); + background: var(--color-bg-alt); + border-radius: var(--radius); + border-inline-start: 4px solid; +} + +.dash-card.pending { + border-color: var(--color-accent); +} + +.dash-card.done { + border-color: var(--color-success); +} + +.dash-card-icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-bg); + border-radius: var(--radius); + color: var(--color-primary-light); +} + +.dash-card-icon svg { + width: 24px; + height: 24px; +} + +.dash-card-text { + flex: 1; +} + +.dash-card-title { + display: block; + font-family: var(--font-display); + font-weight: 500; + font-size: var(--text-sm); + color: var(--color-primary-dark); +} + +.dash-card-desc { + font-size: var(--text-xs); + color: var(--color-text-muted); +} + +.dash-card-action { + padding: var(--space-2) var(--space-3); +} + +.approve-btn { + font-family: var(--font-display); + font-size: var(--text-xs); + font-weight: 500; + color: var(--color-accent); + padding: var(--space-1) var(--space-3); + border: 1px solid var(--color-accent); + border-radius: var(--radius-sm); +} + +.dash-card-status { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-success); + color: #fff; + border-radius: 50%; + font-size: var(--text-sm); +} + +.hero-scroll-hint { + position: absolute; + bottom: var(--space-8); + inset-inline-start: 50%; + transform: translateX(50%); + animation: bounce 2s infinite; +} + +[dir="ltr"] .hero-scroll-hint { + transform: translateX(-50%); +} + +.hero-scroll-hint svg { + width: 32px; + height: 32px; + color: var(--color-text-muted); +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { transform: translateX(50%) translateY(0); } + 40% { transform: translateX(50%) translateY(-10px); } + 60% { transform: translateX(50%) translateY(-5px); } +} + +@media (prefers-reduced-motion: no-preference) { + .hero-scroll-hint { + animation: bounce 2s infinite; + } +} + +@media (min-width: 1024px) { + .hero { + padding-top: calc(var(--header-height) + var(--space-20)); + padding-bottom: var(--space-20); + } + + .hero-content { + grid-template-columns: 1fr 1fr; + gap: var(--space-16); + } + + .hero-visual { + display: block; + } +} + +/* ===== Sections Common ===== */ +section { + padding: var(--space-16) 0; +} + +.section-header { + text-align: center; + max-width: 700px; + margin-inline: auto; + margin-bottom: var(--space-12); +} + +.section-title { + font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); + margin-bottom: var(--space-4); +} + +.section-subtitle { + font-size: var(--text-lg); + color: var(--color-text-muted); +} + +/* ===== How It Works ===== */ +.how-it-works { + background: var(--color-bg); +} + +.steps-grid { + display: grid; + gap: var(--space-8); + max-width: 1000px; + margin-inline: auto; +} + +.step-card { + text-align: center; + padding: var(--space-8); + background: var(--color-bg-alt); + border-radius: var(--radius-xl); + position: relative; +} + +.step-number { + position: absolute; + top: var(--space-4); + inset-inline-end: var(--space-4); + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary-dark); + color: #fff; + font-family: var(--font-display); + font-weight: 600; + font-size: var(--text-sm); + border-radius: 50%; +} + +.step-icon { + width: 80px; + height: 80px; + margin-inline: auto; + margin-bottom: var(--space-6); + color: var(--color-primary-light); +} + +.step-title { + font-size: var(--text-xl); + margin-bottom: var(--space-3); +} + +.step-desc { + color: var(--color-text-muted); + max-width: 280px; + margin-inline: auto; +} + +.step-connector { + display: none; +} + +@media (min-width: 768px) { + .steps-grid { + grid-template-columns: 1fr auto 1fr auto 1fr; + align-items: center; + gap: var(--space-6); + } + + .step-connector { + display: block; + width: 40px; + color: var(--color-border); + } + + /* RTL: arrow should point left (reading direction) */ + .step-connector svg { + transform: scaleX(-1); + } +} + +/* ===== Benefits ===== */ +.benefits { + background: var(--color-bg-alt); +} + +.benefits-grid { + display: grid; + gap: var(--space-6); +} + +.benefit-card { + background: var(--color-bg); + padding: var(--space-8); + border-radius: var(--radius-lg); + box-shadow: var(--shadow); + transition: transform var(--transition), box-shadow var(--transition); +} + +.benefit-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +/* Featured benefit card — visually distinct */ +.benefit-featured { + background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); + color: #fff; +} + +.benefit-featured .benefit-icon { + color: var(--color-accent-light); +} + +.benefit-featured .benefit-title { + color: #fff; +} + +.benefit-featured .benefit-desc { + color: rgba(255, 255, 255, 0.85); +} + +.benefit-icon { + width: 56px; + height: 56px; + margin-bottom: var(--space-5); + color: var(--color-primary-light); +} + +.benefit-title { + font-size: var(--text-lg); + margin-bottom: var(--space-2); +} + +.benefit-desc { + color: var(--color-text-muted); + font-size: var(--text-sm); +} + +@media (min-width: 640px) { + .benefits-grid { + grid-template-columns: repeat(2, 1fr); + } + + /* Featured card spans full width on 2-col layout */ + .benefit-featured { + grid-column: 1 / -1; + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-6); + align-items: center; + text-align: start; + } + + .benefit-featured .benefit-icon { + width: 72px; + height: 72px; + margin-bottom: 0; + } + + .benefit-featured .benefit-content { + display: contents; + } +} + +@media (min-width: 1024px) { + .benefits-grid { + grid-template-columns: repeat(3, 1fr); + } + + .benefit-featured { + grid-column: 1 / -1; + } +} + +/* ===== Agents ===== */ +.agents { + background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%); + padding: var(--space-20) 0; +} + +.agents-grid { + display: grid; + gap: var(--space-6); +} + +.agent-card { + --agent-color: var(--color-primary-light); + background: var(--color-bg); + padding: var(--space-6); + border-radius: var(--radius-lg); + box-shadow: var(--shadow); + border-top: 4px solid var(--agent-color); + transition: transform var(--transition), box-shadow var(--transition); +} + +.agent-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.agent-marketing { --agent-color: var(--color-agent-marketing); } +.agent-sales { --agent-color: var(--color-agent-sales); } +.agent-support { --agent-color: var(--color-agent-support); } +.agent-finance { --agent-color: var(--color-agent-finance); } +.agent-operations { --agent-color: var(--color-agent-operations); } +.agent-web { --agent-color: var(--color-agent-web); } + +.agent-icon { + width: 48px; + height: 48px; + margin-bottom: var(--space-4); + color: var(--agent-color); +} + +.agent-title { + font-size: var(--text-lg); + margin-bottom: var(--space-2); +} + +.agent-desc { + font-size: var(--text-sm); + color: var(--color-text-muted); + line-height: 1.6; +} + +@media (min-width: 640px) { + .agents-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .agents-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +/* ===== Trust Section ===== */ +.trust { + background: var(--color-bg); + padding: var(--space-20) 0; +} + +.trust-content { + display: grid; + gap: var(--space-12); + align-items: center; +} + +.trust-visual { + display: flex; + justify-content: center; +} + +.shield-graphic { + position: relative; + width: 160px; + height: 180px; +} + +.shield-graphic svg { + width: 100%; + height: 100%; +} + +.shield-pulse { + position: absolute; + inset: -20px; + border: 2px solid var(--color-primary-light); + border-radius: 50%; + opacity: 0; + animation: pulse 2s ease-out infinite; + animation-play-state: paused; +} + +.trust-visual.visible .shield-pulse { + animation-play-state: running; +} + +@keyframes pulse { + 0% { transform: scale(0.8); opacity: 0.5; } + 100% { transform: scale(1.2); opacity: 0; } +} + +.trust-text .section-title { + text-align: start; + margin-bottom: var(--space-6); +} + +.trust-desc { + font-size: var(--text-lg); + color: var(--color-text-muted); + margin-bottom: var(--space-8); + max-width: 540px; +} + +.trust-list { + display: flex; + flex-direction: column; + gap: var(--space-4); + margin-bottom: var(--space-8); +} + +.trust-list li { + display: flex; + align-items: flex-start; + gap: var(--space-3); +} + +.trust-check { + width: 24px; + height: 24px; + flex-shrink: 0; + color: var(--color-success); +} + +.trust-list span { + color: var(--color-text); +} + +.trust-bottom { + font-family: var(--font-display); + font-size: var(--text-lg); + font-weight: 500; + color: var(--color-primary-dark); +} + +@media (min-width: 1024px) { + .trust-content { + grid-template-columns: 1fr 1.5fr; + gap: var(--space-16); + } + + .shield-graphic { + width: 200px; + height: 240px; + } +} + +/* ===== Final CTA ===== */ +.final-cta { + background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); + padding: var(--space-20) 0; +} + +.cta-wrapper { + max-width: 700px; + margin-inline: auto; + text-align: center; +} + +.cta-title { + font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); + color: #fff; + margin-bottom: var(--space-4); +} + +.cta-subtitle { + font-size: var(--text-lg); + color: rgba(255,255,255,0.85); + margin-bottom: var(--space-10); +} + +.cta-form { + background: var(--color-bg); + padding: var(--space-8); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); +} + +.form-grid { + display: grid; + gap: var(--space-4); + margin-bottom: var(--space-6); + text-align: start; +} + +.form-group label { + display: block; + font-size: var(--text-sm); + font-weight: 500; + color: var(--color-text); + margin-bottom: var(--space-1); +} + +.form-group input { + width: 100%; + padding: var(--space-3) var(--space-4); + border: 2px solid var(--color-border); + border-radius: var(--radius); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.form-group input:focus { + outline: none; + border-color: var(--color-primary-light); + box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); +} + +.form-group input::placeholder { + color: var(--color-text-muted); +} + +.form-group input.error { + border-color: var(--color-error); +} + +.form-group input.error:focus { + box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); +} + +.form-error { + font-size: var(--text-xs); + color: var(--color-error); + margin-top: var(--space-1); + display: none; +} + +.form-group.has-error .form-error { + display: block; +} + +.btn-submit { + width: 100%; + gap: var(--space-3); +} + +.btn-arrow { + width: 20px; + height: 20px; + transition: transform var(--transition-fast); +} + +/* RTL: arrow moves left (negative X) on hover */ +.btn-submit:hover .btn-arrow { + transform: translateX(-4px); +} + +/* LTR: arrow moves right (positive X) on hover */ +[dir="ltr"] .btn-submit:hover .btn-arrow { + transform: translateX(4px); +} + +.form-note { + font-size: var(--text-xs); + color: var(--color-text-muted); + margin-top: var(--space-4); +} + +.form-success { + padding: var(--space-12); + text-align: center; + background: var(--color-bg); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); +} + +.form-success svg { + width: 80px; + height: 80px; + margin-inline: auto; + margin-bottom: var(--space-6); +} + +.form-success h3 { + font-size: var(--text-xl); + margin-bottom: var(--space-2); +} + +.form-success p { + color: var(--color-text-muted); +} + +@media (min-width: 640px) { + .form-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* ===== Footer ===== */ +.site-footer { + background: var(--color-bg-dark); + padding: var(--space-16) 0 var(--space-8); + border-top: 1px solid var(--color-border); +} + +.footer-main { + display: grid; + gap: var(--space-10); + margin-bottom: var(--space-10); +} + +.footer-logo { + display: block; + margin-bottom: var(--space-4); +} + +.footer-logo-icon { + height: 40px; + width: auto; +} + +.footer-tagline { + font-size: var(--text-sm); + color: var(--color-text-muted); +} + +.footer-nav-title { + font-size: var(--text-sm); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-text-muted); + margin-bottom: var(--space-4); +} + +.footer-nav-list { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.footer-nav-list a { + font-size: var(--text-sm); + color: var(--color-text); + padding: var(--space-1) 0; +} + +.footer-nav-list a:hover { + color: var(--color-primary-light); +} + +.footer-contact-list { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.footer-contact-list li { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.footer-contact-list svg { + width: 18px; + height: 18px; + color: var(--color-text-muted); +} + +.footer-contact-list a { + font-size: var(--text-sm); + color: var(--color-text); +} + +.footer-bottom { + padding-top: var(--space-8); + border-top: 1px solid var(--color-border); + text-align: center; +} + +.copyright { + font-size: var(--text-sm); + color: var(--color-text-muted); +} + +@media (min-width: 768px) { + .footer-main { + grid-template-columns: 2fr 1fr 1fr; + } +} \ No newline at end of file