diff --git a/index.html b/index.html new file mode 100644 index 0000000..60a38b4 --- /dev/null +++ b/index.html @@ -0,0 +1,481 @@ + + + + + + אמיליו – הדירקטוריון הדיגיטלי לעסק שלך | Emaillion + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+
+
+
+ + מבית Emaillion +
+

+ הדירקטוריון הדיגיטלי + שעובד בשבילך +

+

ואתה מחליט מה קורה.

+

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

+
+ + קבעו הדגמה חינם + + + + איך זה עובד? + +
+
    +
  • + + אינטגרציות אמיתיות +
    • +
  • + + נתונים חיים +
    • +
  • + + שליטה מלאה +
    • +
+
+
+
+ + +
+
+
+ הבעיה +

מנהל עסק? כנראה שאתה מכיר את זה.

+
+
+
+ +

עשרות כלים, אפס תיאום

+

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

+
+
+ +

החלטות על בסיס תחושה

+

אין זמן לדוחות. אין זמן לנתח. אז מנחשים — ומקווים לטוב.

+
+
+ +

כל היום בכיבוי שריפות

+

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

+
+
+
+
+ + +
+
+
+ הפתרון +

הכירו את הדירקטוריון

+

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

+
+ +
+
+ +
+

אמיליו

+

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

+
+
+ +
+
+ +

שיווק

+

מנתח קמפיינים, מזהה הזדמנויות, ממליץ על תקציבים.

+
+ +
+ +

מכירות / CRM

+

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

+
+ +
+ +

כספים ודוחות

+

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

+
+ +
+ +

תפעול

+

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

+
+ +
+ +

תמיכה

+

טיוטות תשובות לפניות, פותח טיקטים, מעדכן סטטוסים.

+
+ +
+ +

בניית אתרים

+

WP AI — יוצר דפי נחיתה, מעדכן תכנים, מציג תצוגה מקדימה.

+
+ +
+ +

תקשורת

+

וואטסאפ, אימייל, SMS — טיוטה מוכנה, אתה מאשר, היא יוצאת.

+
+
+
+
+
+ + +
+
+
+ התהליך +

שלושה צעדים. שליטה מלאה.

+
+ +
    +
  1. +
    + 1 +
    +
    +

    אתה שואל או מגדיר יעד

    +

    "כמה הוצאתי על קמפיינים החודש?" / "תעדכן תקציב ל-500 ש״ח ליום" / "תשלח תזכורת ללקוחות שלא שילמו"

    + +
    +
    2. + +
  2. +
    + 2 +
    +
    +

    הסוכן מנתח ומציע

    +

    אמיליו שולף נתונים אמיתיים מהמערכות שלך, מנתח, ומציג המלצה מנומקת עם מקורות.

    + +
    +
    3. + +
  3. +
    + 3 +
    +
    +

    אתה מאשר, אמיליו מבצע

    +

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

    + +
    +
    4. +
+
+
+ + +
+
+
+ אינטגרציות +

מחובר למערכות שכבר יש לך

+

לא הדגמות — נתונים חיים, סנכרון אמיתי.

+
+
    +
  • + WHMCS / ClientsCenter + ניהול לקוחות +
    • +
  • + Doali + ניהול משימות +
    • +
  • + OwnAvatar + אוואטרים +
    • +
  • + Google Ads + פרסום +
    • +
  • + SmartPay + תשלומים +
    • +
  • + Email Lion + אימייל מרקטינג +
    • +
+
+
+ + +
+
+
+
+ +
+
+ אמון ובטיחות +

שום דבר לא קורה בלי האישור שלך

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

מוכנים לדירקטוריון AI שעובד בשבילכם?

+

השאירו פרטים — נחזור לתיאום הדגמה חינם, בלי התחייבות.

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

+ מעדיפים לדבר? שלחו הודעה בוואטסאפ +

+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f845d44 --- /dev/null +++ b/script.js @@ -0,0 +1,222 @@ +(function() { + 'use strict'; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Navigation scroll effect + const nav = document.querySelector('.nav'); + + function handleScroll() { + if (window.scrollY > 40) { + nav.classList.add('scrolled'); + } else { + nav.classList.remove('scrolled'); + } + } + + window.addEventListener('scroll', handleScroll, { passive: true }); + handleScroll(); + + // Mobile menu toggle + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + const mobileMenu = document.querySelector('.mobile-menu'); + const mobileLinks = document.querySelectorAll('.mobile-link'); + + if (mobileMenuBtn && mobileMenu) { + mobileMenuBtn.addEventListener('click', function() { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', String(!isExpanded)); + mobileMenu.setAttribute('aria-hidden', String(isExpanded)); + }); + + mobileLinks.forEach(function(link) { + link.addEventListener('click', function() { + mobileMenuBtn.setAttribute('aria-expanded', 'false'); + mobileMenu.setAttribute('aria-hidden', 'true'); + }); + }); + } + + // Scroll reveal + if (!prefersReducedMotion) { + const revealElements = document.querySelectorAll('.reveal'); + + const revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.15, + rootMargin: '0px 0px -40px 0px' + }); + + revealElements.forEach(function(el) { + revealObserver.observe(el); + }); + } else { + document.querySelectorAll('.reveal').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 navHeight = nav ? nav.offsetHeight : 0; + const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 16; + + if (prefersReducedMotion) { + window.scrollTo(0, targetPosition); + } else { + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + } + }); + }); + + // Form handling + const form = document.getElementById('contact-form'); + const formSuccess = document.querySelector('.form-success'); + + if (form) { + const nameInput = document.getElementById('name'); + const contactInput = document.getElementById('contact'); + const nameError = nameInput.parentElement.querySelector('.form-error'); + const contactError = contactInput.parentElement.querySelector('.form-error'); + + function validateField(input, errorEl, message) { + if (!input.value.trim()) { + input.classList.add('error'); + errorEl.textContent = message; + return false; + } + input.classList.remove('error'); + errorEl.textContent = ''; + return true; + } + + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const nameValid = validateField(nameInput, nameError, 'נא להזין שם'); + const contactValid = validateField(contactInput, contactError, 'נא להזין אימייל או טלפון'); + + if (!nameValid || !contactValid) { + return; + } + + const submitBtn = form.querySelector('button[type="submit"]'); + submitBtn.disabled = true; + submitBtn.innerHTML = 'שולח...'; + + // Simulate submission + setTimeout(function() { + form.querySelectorAll('.form-group, .form-row, button[type="submit"]').forEach(function(el) { + el.style.display = 'none'; + }); + + formSuccess.hidden = false; + + console.log('Form submitted:', { + name: nameInput.value.trim(), + contact: contactInput.value.trim(), + business: document.getElementById('business').value.trim() + }); + }, 800); + }); + + // Clear errors on input + [nameInput, contactInput].forEach(function(input) { + input.addEventListener('input', function() { + if (this.classList.contains('error')) { + this.classList.remove('error'); + this.parentElement.querySelector('.form-error').textContent = ''; + } + }); + }); + } + + // Demo: Approval buttons + const approveBtn = document.querySelector('.approve-btn'); + const rejectBtn = document.querySelector('.reject-btn'); + const approvalCard = document.querySelector('.approval-card'); + + if (approveBtn && approvalCard) { + approveBtn.addEventListener('click', function() { + const textSpan = this.querySelector('.approve-btn-text'); + if (textSpan) { + textSpan.textContent = 'בוצע!'; + } + this.classList.add('approved'); + approvalCard.style.borderColor = '#10b981'; + + setTimeout(function() { + if (textSpan) { + textSpan.textContent = 'אשר ובצע'; + } + approveBtn.classList.remove('approved'); + approvalCard.style.borderColor = ''; + }, 2000); + }); + } + + if (rejectBtn && approvalCard) { + rejectBtn.addEventListener('click', function() { + const textSpan = this.querySelector('.reject-btn-text'); + const originalText = textSpan ? textSpan.textContent : 'דחה'; + + approvalCard.style.opacity = '0.5'; + this.classList.add('rejected'); + if (textSpan) { + textSpan.textContent = 'נדחה'; + } + + setTimeout(function() { + approvalCard.style.opacity = ''; + rejectBtn.classList.remove('rejected'); + if (textSpan) { + textSpan.textContent = originalText; + } + }, 2000); + }); + } + + // Keyboard: close mobile menu on Escape + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && mobileMenuBtn && mobileMenu) { + mobileMenuBtn.setAttribute('aria-expanded', 'false'); + mobileMenu.setAttribute('aria-hidden', 'true'); + } + }); + + // Mouse vs keyboard focus + document.addEventListener('mousedown', function() { + document.body.classList.add('using-mouse'); + }); + + document.addEventListener('keydown', function(e) { + if (e.key === 'Tab') { + document.body.classList.remove('using-mouse'); + } + }); + + // Dynamic year + const yearSpan = document.getElementById('year'); + if (yearSpan) { + yearSpan.textContent = new Date().getFullYear(); + } + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ffa6602 --- /dev/null +++ b/style.css @@ -0,0 +1,1174 @@ +:root { + --bg: #0a0f1c; + --bg-secondary: #0d1220; + --card-bg: #131a2b; + --border: #1e293b; + --text: #f1f5f9; + --text-muted: #94a3b8; + --primary: #6366f1; + --primary-muted: #4f46e5; + --accent: #00d4aa; + --accent-glow: rgba(0, 212, 170, 0.25); + --warning: #f59e0b; + --danger: #f87171; + + --font-body: 'Heebo', system-ui, sans-serif; + --font-display: 'Space Grotesk', var(--font-body); + + --space-2xs: 0.25rem; + --space-xs: 0.5rem; + --space-sm: 0.75rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; + --space-3xl: 4rem; + --space-4xl: 6rem; + + --container: 1120px; + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 16px; + --radius-full: 9999px; + + --transition-fast: 120ms ease; + --transition-base: 200ms ease; +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: 80px; +} + +@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: 1rem; + font-weight: 400; + line-height: 1.65; + color: var(--text); + background: var(--bg); + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} + +/* Utility */ +.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; +} + +/* Container */ +.container { + width: 100%; + max-width: var(--container); + margin-inline: auto; + padding-inline: var(--space-lg); +} + +/* ===== Navigation ===== */ +.nav { + position: fixed; + inset-block-start: 0; + inset-inline: 0; + z-index: 1000; + padding-block: var(--space-sm); + background: rgba(10, 15, 28, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-block-end: 1px solid transparent; + transition: border-color var(--transition-base), background var(--transition-base); +} + +.nav.scrolled { + border-block-end-color: var(--border); + background: rgba(10, 15, 28, 0.95); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: var(--container); + margin-inline: auto; + padding-inline: var(--space-lg); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-xs); + text-decoration: none; + color: var(--text); +} + +.logo-icon { + width: 36px; + height: 36px; +} + +.logo-text { + font-family: var(--font-display); + font-size: 1.125rem; + font-weight: 600; + letter-spacing: -0.01em; +} + +.nav-links { + display: flex; + align-items: center; + gap: var(--space-xl); +} + +.nav-link { + color: var(--text-muted); + text-decoration: none; + font-size: 0.9375rem; + font-weight: 500; + transition: color var(--transition-fast); +} + +.nav-link:hover, +.nav-link:focus-visible { + color: var(--text); +} + +.nav-cta { + display: inline-flex; + align-items: center; + padding: var(--space-xs) var(--space-md); + background: var(--accent); + color: var(--bg); + text-decoration: none; + font-size: 0.875rem; + font-weight: 600; + border-radius: var(--radius-full); + transition: transform var(--transition-fast), box-shadow var(--transition-fast); +} + +.nav-cta:hover, +.nav-cta:focus-visible { + transform: translateY(-1px); + box-shadow: 0 6px 20px var(--accent-glow); +} + +.mobile-menu-btn { + display: none; + flex-direction: column; + gap: 5px; + padding: var(--space-xs); + background: none; + border: none; + cursor: pointer; +} + +.mobile-menu-btn span { + display: block; + width: 22px; + height: 2px; + background: var(--text); + border-radius: 2px; + transition: transform var(--transition-base), opacity 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-menu { + position: fixed; + inset-block-start: 60px; + inset-inline: 0; + z-index: 999; + display: none; + flex-direction: column; + padding: var(--space-lg); + background: var(--bg-secondary); + border-block-end: 1px solid var(--border); +} + +.mobile-menu[aria-hidden="false"] { + display: flex; +} + +.mobile-link { + display: block; + padding: var(--space-md) 0; + color: var(--text); + text-decoration: none; + font-size: 1rem; + font-weight: 500; + border-block-end: 1px solid var(--border); +} + +.mobile-link.cta { + margin-block-start: var(--space-md); + padding: var(--space-md); + background: var(--accent); + color: var(--bg); + text-align: center; + border-radius: var(--radius-md); + border: none; +} + +@media (max-width: 768px) { + .nav-links { display: none; } + .mobile-menu-btn { display: flex; } +} + +/* ===== Hero ===== */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + padding-block: calc(70px + var(--space-3xl)) var(--space-3xl); + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + pointer-events: none; +} + +.hero-gradient { + position: absolute; + inset: 0; + background: + radial-gradient(ellipse 70% 45% at 50% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 60%), + radial-gradient(ellipse 50% 35% at 85% 70%, rgba(0, 212, 170, 0.08) 0%, transparent 50%); +} + +.hero-grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px), + linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px); + background-size: 50px 50px; + mask-image: radial-gradient(ellipse 60% 50% at center 30%, black 0%, transparent 70%); +} + +.hero-content { + position: relative; + z-index: 1; + max-width: 680px; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-2xs) var(--space-sm); + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius-full); + font-size: 0.8125rem; + font-weight: 500; + color: var(--text-muted); + margin-block-end: var(--space-lg); +} + +.badge-dot { + width: 6px; + height: 6px; + background: var(--accent); + border-radius: 50%; +} + +.hero-title { + font-family: var(--font-display); + font-size: clamp(2.25rem, 5.5vw, 3.5rem); + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.02em; + margin-block-end: var(--space-sm); +} + +.hero-title-accent { + display: block; + background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-lead { + font-size: clamp(1.125rem, 2vw, 1.375rem); + font-weight: 500; + color: var(--text); + margin-block-end: var(--space-md); +} + +.hero-subtitle { + font-size: 1rem; + color: var(--text-muted); + max-width: 520px; + margin-block-end: var(--space-xl); +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + margin-block-end: var(--space-2xl); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-lg); + font-family: var(--font-body); + font-size: 0.9375rem; + font-weight: 600; + text-decoration: none; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); +} + +.btn svg { + width: 18px; + height: 18px; + flex-shrink: 0; +} + +.btn-primary { + background: var(--accent); + color: var(--bg); +} + +.btn-primary:hover, +.btn-primary:focus-visible { + transform: translateY(-2px); + box-shadow: 0 8px 24px var(--accent-glow); +} + +.btn-primary:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.btn-primary:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +.btn-secondary { + background: transparent; + color: var(--text); + border: 1px solid var(--border); +} + +.btn-secondary:hover, +.btn-secondary:focus-visible { + background: var(--card-bg); + border-color: var(--primary); +} + +.btn-secondary:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +.btn-full { + width: 100%; +} + +.hero-trust { + display: flex; + flex-wrap: wrap; + gap: var(--space-lg); + list-style: none; +} + +.trust-item { + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: 0.875rem; + color: var(--text-muted); +} + +.trust-item svg { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +/* ===== Sections Common ===== */ +section { + padding-block: var(--space-3xl); +} + +.section-label { + display: inline-block; + padding: var(--space-2xs) var(--space-sm); + background: var(--card-bg); + border: 1px solid var(--border); + color: var(--text-muted); + font-size: 0.8125rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + border-radius: var(--radius-sm); + margin-block-end: var(--space-md); +} + +.section-title { + font-family: var(--font-display); + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 600; + line-height: 1.2; + letter-spacing: -0.01em; + margin-block-end: var(--space-md); +} + +.section-subtitle { + font-size: 1rem; + color: var(--text-muted); + max-width: 480px; +} + +.section-header { + text-align: center; + margin-block-end: var(--space-2xl); +} + +.section-header .section-subtitle { + margin-inline: auto; +} + +/* ===== Problem Section ===== */ +.problem { + background: var(--bg-secondary); +} + +.problem-content { + margin-block-end: var(--space-xl); +} + +.problem-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-md); +} + +@media (max-width: 900px) { + .problem-grid { + grid-template-columns: 1fr; + } +} + +.problem-card { + padding: var(--space-lg); + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + transition: border-color var(--transition-base); +} + +.problem-card:hover { + border-color: var(--danger); +} + +.problem-icon { + width: 40px; + height: 40px; + margin-block-end: var(--space-md); +} + +.problem-icon svg { + width: 100%; + height: 100%; +} + +.problem-card h3 { + font-size: 1.0625rem; + font-weight: 600; + margin-block-end: var(--space-xs); +} + +.problem-card p { + color: var(--text-muted); + font-size: 0.9375rem; +} + +/* ===== Solution Section ===== */ +.board-wrapper { + display: flex; + flex-direction: column; + gap: var(--space-xl); +} + +.board-leader { + display: flex; + align-items: center; + gap: var(--space-lg); + padding: var(--space-lg); + background: linear-gradient(135deg, rgba(0, 212, 170, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%); + border: 1px solid var(--accent); + border-radius: var(--radius-lg); +} + +.leader-icon { + flex-shrink: 0; + width: 72px; + height: 72px; +} + +.leader-icon svg { + width: 100%; + height: 100%; +} + +.leader-text h3 { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 600; + margin-block-end: var(--space-2xs); + color: var(--accent); +} + +.leader-text p { + color: var(--text-muted); + font-size: 0.9375rem; +} + +.board-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: var(--space-md); +} + +.board-member { + padding: var(--space-lg); + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + transition: border-color var(--transition-base), transform var(--transition-base); +} + +.board-member:hover { + border-color: var(--primary); + transform: translateY(-4px); +} + +.member-icon { + width: 48px; + height: 48px; + margin-block-end: var(--space-md); +} + +.member-icon svg { + width: 100%; + height: 100%; +} + +.board-member h3 { + font-size: 1rem; + font-weight: 600; + margin-block-end: var(--space-2xs); +} + +.board-member p { + color: var(--text-muted); + font-size: 0.875rem; + line-height: 1.55; +} + +/* ===== How It Works ===== */ +.how-it-works { + background: var(--bg-secondary); +} + +.steps { + list-style: none; + max-width: 640px; + margin-inline: auto; + counter-reset: step; +} + +.step { + display: grid; + grid-template-columns: 48px 1fr; + gap: var(--space-md); + padding-block-end: var(--space-xl); + position: relative; +} + +.step:not(:last-child)::before { + content: ''; + position: absolute; + inset-inline-start: 23px; + inset-block-start: 48px; + width: 2px; + height: calc(100% - 48px); + background: var(--border); +} + +.step-marker { + position: relative; + z-index: 1; +} + +.step-number { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + background: var(--card-bg); + border: 2px solid var(--primary); + border-radius: 50%; + font-family: var(--font-display); + font-size: 1.125rem; + font-weight: 600; + color: var(--primary); +} + +.step-content h3 { + font-size: 1.125rem; + font-weight: 600; + margin-block-end: var(--space-xs); +} + +.step-content > p { + color: var(--text-muted); + font-size: 0.9375rem; + margin-block-end: var(--space-md); +} + +.step-demo { + padding: var(--space-md); + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius-md); +} + +/* Chat Bubbles */ +.chat-bubble { + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-md); + font-size: 0.9375rem; + line-height: 1.55; +} + +.chat-user { + background: var(--primary); + color: var(--text); + border-end-end-radius: var(--radius-sm); +} + +.chat-ai { + background: var(--bg); + border: 1px solid var(--border); +} + +.chat-sources { + display: flex; + flex-wrap: wrap; + gap: var(--space-xs); + margin-block-start: var(--space-sm); + padding-block-start: var(--space-sm); + border-block-start: 1px solid var(--border); +} + +.source-tag { + display: inline-flex; + padding: var(--space-2xs) var(--space-xs); + background: rgba(0, 212, 170, 0.1); + color: var(--accent); + font-size: 0.6875rem; + font-weight: 600; + border-radius: var(--radius-sm); +} + +/* Approval Card */ +.approval-card { + background: var(--bg); + border: 2px solid var(--accent); + border-radius: var(--radius-md); + overflow: hidden; + transition: border-color var(--transition-base), opacity var(--transition-base); +} + +.approval-header { + display: flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-md); + background: rgba(0, 212, 170, 0.08); + font-size: 0.8125rem; + font-weight: 600; + color: var(--accent); +} + +.approval-header svg { + width: 18px; + height: 18px; +} + +.approval-action { + padding: var(--space-md); + font-size: 0.9375rem; +} + +.approval-buttons { + display: flex; + gap: var(--space-xs); + padding: var(--space-md); + padding-block-start: 0; +} + +.approve-btn, +.reject-btn { + flex: 1; + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-xs); + padding: var(--space-xs) var(--space-sm); + font-family: var(--font-body); + font-size: 0.8125rem; + font-weight: 600; + border: none; + border-radius: var(--radius-sm); + cursor: pointer; + transition: transform var(--transition-fast), background var(--transition-fast); +} + +.approve-btn { + background: var(--accent); + color: var(--bg); +} + +.approve-btn:hover { + transform: scale(1.02); +} + +.approve-btn:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.approve-btn svg { + width: 14px; + height: 14px; +} + +.approve-btn.approved { + background: #10b981; +} + +.reject-btn { + background: transparent; + color: var(--text-muted); + border: 1px solid var(--border); +} + +.reject-btn:hover { + border-color: var(--danger); + color: var(--danger); +} + +.reject-btn:focus-visible { + outline: 2px solid var(--danger); + outline-offset: 2px; +} + +.reject-btn.rejected { + border-color: var(--danger); + color: var(--danger); +} + +/* ===== Integrations ===== */ +.integrations-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--space-sm); + list-style: none; +} + +.integration-item { + display: flex; + flex-direction: column; + align-items: center; + padding: var(--space-md) var(--space-lg); + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius-md); + min-width: 150px; + transition: border-color var(--transition-base), transform var(--transition-base); +} + +.integration-item:hover { + border-color: var(--primary); + transform: translateY(-2px); +} + +.integration-name { + font-weight: 600; + font-size: 0.9375rem; + margin-block-end: var(--space-2xs); +} + +.integration-type { + font-size: 0.75rem; + color: var(--text-muted); +} + +/* ===== Trust Section ===== */ +.trust-section { + background: var(--bg-secondary); +} + +.trust-content { + display: flex; + align-items: center; + gap: var(--space-2xl); +} + +.trust-badge { + flex-shrink: 0; +} + +.shield-icon { + width: 100px; + height: 125px; +} + +.trust-text .section-title { + margin-block-end: var(--space-lg); +} + +.trust-list { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.trust-list li { + display: flex; + align-items: flex-start; + gap: var(--space-sm); +} + +.trust-list svg { + flex-shrink: 0; + width: 18px; + height: 18px; + margin-block-start: 3px; +} + +.trust-emphasis { + color: var(--accent); + font-weight: 600; + font-style: normal; +} + +@media (max-width: 768px) { + .trust-content { + flex-direction: column; + text-align: center; + } + + .trust-badge { + order: -1; + } + + .shield-icon { + width: 80px; + height: 100px; + } + + .trust-list { + text-align: start; + } +} + +/* ===== CTA Section ===== */ +.cta-section { + position: relative; +} + +.cta-section::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0, 212, 170, 0.06) 0%, transparent 60%); + pointer-events: none; +} + +.cta-content { + position: relative; + z-index: 1; + max-width: 520px; + margin-inline: auto; + text-align: center; +} + +.cta-title { + font-family: var(--font-display); + font-size: clamp(1.5rem, 3.5vw, 2rem); + font-weight: 600; + line-height: 1.25; + margin-block-end: var(--space-sm); +} + +.cta-subtitle { + color: var(--text-muted); + margin-block-end: var(--space-xl); +} + +.cta-form { + display: flex; + flex-direction: column; + gap: var(--space-sm); + margin-block-end: var(--space-lg); + text-align: start; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-sm); +} + +@media (max-width: 500px) { + .form-row { + grid-template-columns: 1fr; + } +} + +.form-group { + position: relative; +} + +.form-group input { + width: 100%; + padding: var(--space-lg) var(--space-md) var(--space-xs); + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius-md); + color: var(--text); + font-family: var(--font-body); + font-size: 1rem; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.form-group label { + position: absolute; + inset-inline-start: var(--space-md); + inset-block-start: 50%; + transform: translateY(-50%); + font-size: 0.9375rem; + color: var(--text-muted); + pointer-events: none; + transition: transform var(--transition-fast), font-size var(--transition-fast), color var(--transition-fast), inset-block-start var(--transition-fast); +} + +.form-group input:focus, +.form-group input:not(:placeholder-shown) { + outline: none; +} + +.form-group input:focus { + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); +} + +.form-group input:focus ~ label, +.form-group input:not(:placeholder-shown) ~ label { + inset-block-start: var(--space-xs); + transform: translateY(0); + font-size: 0.75rem; + color: var(--text-muted); +} + +.form-group input.error { + border-color: var(--danger); +} + +.form-error { + display: block; + min-height: 1.25rem; + font-size: 0.75rem; + color: var(--danger); + padding-inline-start: var(--space-md); +} + +.form-success { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: var(--space-md); + background: rgba(0, 212, 170, 0.1); + border: 1px solid var(--accent); + border-radius: var(--radius-md); + color: var(--accent); + font-weight: 500; +} + +.form-success svg { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.cta-alt { + color: var(--text-muted); + font-size: 0.9375rem; +} + +.whatsapp-link { + color: #25D366; + font-weight: 600; + text-decoration: none; + transition: color var(--transition-fast); +} + +.whatsapp-link:hover, +.whatsapp-link:focus-visible { + color: #20bd5a; + text-decoration: underline; +} + +/* ===== Footer ===== */ +.footer { + padding-block: var(--space-2xl) var(--space-lg); + background: var(--bg-secondary); + border-block-start: 1px solid var(--border); +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: var(--space-xl); + margin-block-end: var(--space-xl); + padding-block-end: var(--space-xl); + border-block-end: 1px solid var(--border); +} + +.footer-brand .logo { + margin-block-end: var(--space-sm); +} + +.footer-tagline { + color: var(--text-muted); + font-size: 0.8125rem; + font-style: italic; +} + +.family-label { + display: block; + font-size: 0.75rem; + color: var(--text-muted); + margin-block-end: var(--space-sm); +} + +.family-links { + display: flex; + gap: var(--space-md); +} + +.family-links a { + color: var(--text); + text-decoration: none; + font-size: 0.875rem; + transition: color var(--transition-fast); +} + +.family-links a:hover, +.family-links a:focus-visible { + color: var(--accent); +} + +.footer-bottom { + text-align: center; +} + +.footer-bottom p { + color: var(--text-muted); + font-size: 0.8125rem; +} + +@media (max-width: 600px) { + .footer-content { + flex-direction: column; + align-items: center; + text-align: center; + } + + .family-links { + justify-content: center; + } +} + +/* ===== Reveal Animations ===== */ +.reveal { + opacity: 0; + transform: translateY(20px); + 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; + } +} + +/* ===== Focus Styles ===== */ +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.using-mouse :focus:not(:focus-visible) { + outline: none; +} \ No newline at end of file