diff --git a/index.html b/index.html new file mode 100644 index 0000000..e469563 --- /dev/null +++ b/index.html @@ -0,0 +1,641 @@ + + + + + + אימייליון | בניית אתרים עם AI + + + + + + + + + + + + + +
+
+ + + + + +
+ +
+
+ + סטודיו דיגיטלי מונע AI +
+

+ אנחנו יוצרים + חוויות דיגיטליות + שלא נשכחות +

+

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

+
+ + צפו בעבודות + + התחילו פרויקט +
+
+ +
+ + + +
+
+
+ תיק עבודות +

פרויקטים נבחרים

+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ אתר תדמית +

נובה טכנולוגיות

+

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

+
+ UI/UX + פיתוח + אנימציה +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ אפליקציית מובייל +

בריאלי

+

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

+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ מערכת ניהול +

דאטה פלוס

+

דשבורד אנליטיקס מתקדם עם ויזואליזציות נתונים אינטראקטיביות.

+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ חנות אונליין +

לוקס ליבינג

+

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

+
+ E-commerce + UX + התאמה אישית +
+
+
+
+ +
+
+
+
+ +
+
+
+ מיתוג דיגיטלי +

ספייס קריאייטיב

+

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

+
+
+
+ +
+
+
+
+ +
+
+
+ אתר תוכן +

אינסייט מגזין

+

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

+
+
+
+
+
+
+ +
+
+
+
+ 0 + + + פרויקטים הושלמו +
+
+ 0 + % + שביעות רצון לקוחות +
+
+ 0 + + + שנות ניסיון +
+
+
+
+ +
+
+
+ מה אנחנו עושים +

השירותים שלנו

+
+ +
+
+ +

עיצוב אתרים

+

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

+
    +
  • עיצוב UI/UX
    • +
  • עיצוב רספונסיבי
    • +
  • פרוטוטייפים אינטראקטיביים
    • +
+
+ +
+
הכי מבוקש
+ +

פיתוח מתקדם

+

פיתוח front-end ו-back-end בטכנולוגיות החדשניות ביותר, עם ביצועים מעולים ואבטחה מקסימלית.

+
    +
  • פיתוח Full-Stack
    • +
  • אופטימיזציה לביצועים
    • +
  • אינטגרציות API
    • +
+
+ +
+ +

בינה מלאכותית

+

שילוב יכולות AI מתקדמות באתר — מצ׳אטבוטים חכמים ועד המלצות מותאמות אישית.

+
    +
  • צ׳אטבוטים AI
    • +
  • אוטומציה חכמה
    • +
  • ניתוח נתונים
    • +
+
+ +
+ +

מיתוג דיגיטלי

+

בניית זהות מותג דיגיטלית שלמה — מלוגו ועד שפה עיצובית אחידה בכל הפלטפורמות.

+
    +
  • עיצוב לוגו
    • +
  • ספר מותג
    • +
  • נכסים דיגיטליים
    • +
+
+
+
+
+ +
+
+
+ איך אנחנו עובדים +

התהליך שלנו

+
+ +
+ + +
+ +
+

גילוי והבנה

+

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

+
+
+ +
+ +
+

אסטרטגיה ותכנון

+

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

+
+
+ +
+ +
+

עיצוב ויצירה

+

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

+
+
+ +
+ +
+

פיתוח והטמעה

+

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

+
+
+ +
+ +
+

השקה וליווי

+

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

+
+
+
+
+
+ +
+
+
+ +
+ אודות אימייליון +

אנחנו לא סתם בונים אתרים

+

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

+

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

+
+
+ + חדשנות טכנולוגית +
+
+ + עיצוב ללא פשרות +
+
+ + תוצאות מוכחות +
+
+
+
+
+
+ +
+
+
+
+ בואו נדבר +

יש לכם פרויקט בראש?

+

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

+ +
+
+ + צרו קשר דרך הטופס +
+
+ + זמן תגובה: עד 24 שעות +
+
+ +
+
מוכנים להתחיל?
+
השאירו פרטים ונחזור אליכם במהירות
+
+
+ +
+
+ + + + +
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..29b3dc9 --- /dev/null +++ b/script.js @@ -0,0 +1,209 @@ +// Custom Cursor +const cursor = document.querySelector('.cursor'); +const cursorFollower = document.querySelector('.cursor-follower'); + +if (cursor && cursorFollower) { + let mouseX = 0; + let mouseY = 0; + let followerX = 0; + let followerY = 0; + + document.addEventListener('mousemove', (e) => { + mouseX = e.clientX; + mouseY = e.clientY; + cursor.style.left = mouseX + 'px'; + cursor.style.top = mouseY + 'px'; + }); + + function animateFollower() { + followerX += (mouseX - followerX) * 0.15; + followerY += (mouseY - followerY) * 0.15; + cursorFollower.style.left = followerX + 'px'; + cursorFollower.style.top = followerY + 'px'; + requestAnimationFrame(animateFollower); + } + animateFollower(); + + const hoverElements = document.querySelectorAll('a, button, .work-card'); + hoverElements.forEach(el => { + el.addEventListener('mouseenter', () => { + cursor.classList.add('hover'); + cursorFollower.classList.add('hover'); + }); + el.addEventListener('mouseleave', () => { + cursor.classList.remove('hover'); + cursorFollower.classList.remove('hover'); + }); + }); +} + +// Navigation +const nav = document.querySelector('.nav'); +const menuToggle = document.querySelector('.menu-toggle'); +const mobileMenu = document.querySelector('.mobile-menu'); +const mobileLinks = document.querySelectorAll('.mobile-link'); + +window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + nav.classList.add('scrolled'); + } else { + nav.classList.remove('scrolled'); + } +}); + +menuToggle.addEventListener('click', () => { + menuToggle.classList.toggle('active'); + mobileMenu.classList.toggle('active'); + document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : ''; +}); + +mobileLinks.forEach(link => { + link.addEventListener('click', () => { + menuToggle.classList.remove('active'); + mobileMenu.classList.remove('active'); + document.body.style.overflow = ''; + }); +}); + +// Reveal on Scroll +const reveals = document.querySelectorAll('.reveal'); + +const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry, index) => { + if (entry.isIntersecting) { + setTimeout(() => { + entry.target.classList.add('visible'); + }, index * 100); + } + }); +}, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}); + +reveals.forEach(reveal => { + revealObserver.observe(reveal); +}); + +// Stats Counter +const stats = document.querySelectorAll('.stat-number'); +let statsAnimated = false; + +const statsObserver = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting && !statsAnimated) { + statsAnimated = true; + stats.forEach(stat => { + const target = parseInt(stat.dataset.count); + let current = 0; + const duration = 2000; + const increment = target / (duration / 16); + + const counter = setInterval(() => { + current += increment; + if (current >= target) { + stat.textContent = target; + clearInterval(counter); + } else { + stat.textContent = Math.floor(current); + } + }, 16); + }); + } +}, { threshold: 0.5 }); + +const statsSection = document.querySelector('.stats-section'); +if (statsSection) { + statsObserver.observe(statsSection); +} + +// Form Handling +const contactForm = document.getElementById('contactForm'); + +if (contactForm) { + contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + + const btn = contactForm.querySelector('button[type="submit"]'); + const originalText = btn.innerHTML; + + btn.innerHTML = 'שולח...'; + btn.disabled = true; + + setTimeout(() => { + btn.innerHTML = 'נשלח בהצלחה! ✓'; + btn.style.background = 'var(--color-success)'; + + setTimeout(() => { + btn.innerHTML = originalText; + btn.style.background = ''; + btn.disabled = false; + contactForm.reset(); + }, 3000); + }, 1500); + }); +} + +// Smooth Scroll for Navigation Links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + const navHeight = nav.offsetHeight; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight; + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); +}); + +// Parallax effect on hero orbs +const orbs = document.querySelectorAll('.gradient-orb'); + +if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) { + window.addEventListener('scroll', () => { + const scrollY = window.scrollY; + orbs.forEach((orb, index) => { + const speed = (index + 1) * 0.1; + orb.style.transform = `translateY(${scrollY * speed}px)`; + }); + }); +} + +// Work card hover effect +const workCards = document.querySelectorAll('.work-card'); + +workCards.forEach(card => { + card.addEventListener('mousemove', (e) => { + if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) { + const rect = card.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + const centerX = rect.width / 2; + const centerY = rect.height / 2; + const rotateX = (y - centerY) / 20; + const rotateY = (centerX - x) / 20; + + card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`; + } + }); + + card.addEventListener('mouseleave', () => { + card.style.transform = ''; + }); +}); + +// Marquee pause on hover +const marquee = document.querySelector('.marquee'); + +if (marquee) { + marquee.addEventListener('mouseenter', () => { + marquee.querySelector('.marquee-track').style.animationPlayState = 'paused'; + }); + + marquee.addEventListener('mouseleave', () => { + marquee.querySelector('.marquee-track').style.animationPlayState = 'running'; + }); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a0e4741 --- /dev/null +++ b/style.css @@ -0,0 +1,1541 @@ +:root { + --color-bg: #0a0a0f; + --color-bg-alt: #12121a; + --color-text: #f0f0f5; + --color-text-muted: #b0b0c5; + --color-primary: #6366f1; + --color-secondary: #ec4899; + --color-accent: #f59e0b; + --color-success: #10b981; + --color-cyan: #06b6d4; + --color-purple: #8b5cf6; + --color-error: #ef4444; + --font-display: 'Heebo', sans-serif; + --font-body: 'Heebo', sans-serif; + --container: 1200px; + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 2rem; + --space-lg: 4rem; + --space-xl: 6rem; + --radius-sm: 8px; + --radius-md: 16px; + --radius-lg: 24px; + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: 80px; +} + +body { + font-family: var(--font-body); + font-size: 16px; + line-height: 1.7; + color: var(--color-text); + background: var(--color-bg); + overflow-x: hidden; +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + html { + scroll-behavior: auto; + } + .gradient-orb { + animation: none !important; + } + .rotate-slow, + .rotate-slow-reverse { + animation: none !important; + } + .pulse { + animation: none !important; + } +} + +.cursor, .cursor-follower { + display: none; +} + +@media (pointer: fine) and (prefers-reduced-motion: no-preference) { + .cursor { + display: block; + position: fixed; + width: 8px; + height: 8px; + background: var(--color-primary); + border-radius: 50%; + pointer-events: none; + z-index: 9999; + transform: translate(-50%, -50%); + transition: transform 0.1s ease, width 0.2s ease, height 0.2s ease; + } + + .cursor-follower { + display: block; + position: fixed; + width: 36px; + height: 36px; + border: 1px solid var(--color-primary); + border-radius: 50%; + pointer-events: none; + z-index: 9998; + transform: translate(-50%, -50%); + transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease; + opacity: 0.5; + } + + .cursor.hover { + width: 12px; + height: 12px; + background: var(--color-secondary); + } + + .cursor-follower.hover { + width: 50px; + height: 50px; + opacity: 0.8; + } +} + +::selection { + background: var(--color-primary); + color: var(--color-text); +} + +a { + color: inherit; + text-decoration: none; +} + +img { + max-width: 100%; + display: block; +} + +button, input, textarea { + font-family: inherit; + font-size: inherit; +} + +.container { + width: 100%; + max-width: var(--container); + margin-inline: auto; + padding-inline: var(--space-md); +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + inset-inline-start: var(--space-sm); + background: var(--color-primary); + color: var(--color-text); + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-sm); + z-index: 10000; + transition: top 0.3s; + font-weight: 600; +} + +.skip-link:focus { + top: var(--space-sm); +} + +/* Navigation */ +.nav { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 100; + padding: var(--space-sm) 0; + transition: var(--transition); +} + +.nav.scrolled { + background: rgba(10, 10, 15, 0.95); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.nav-inner { + max-width: var(--container); + margin-inline: auto; + padding-inline: var(--space-md); + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.logo-icon svg { + width: 40px; + height: 40px; +} + +.logo-text { + font-size: 1.25rem; + font-weight: 700; +} + +.nav-links { + display: none; + align-items: center; + gap: var(--space-md); +} + +@media (min-width: 768px) { + .nav-links { + display: flex; + } +} + +.nav-link { + font-size: 0.95rem; + font-weight: 500; + position: relative; + padding: var(--space-xs) 0; + transition: var(--transition); +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 0; + height: 2px; + background: var(--color-primary); + transition: var(--transition); +} + +.nav-link:hover::after, +.nav-link:focus::after { + width: 100%; +} + +.nav-cta { + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + padding: var(--space-xs) var(--space-md) !important; + border-radius: var(--radius-sm); +} + +.nav-cta::after { + display: none; +} + +.nav-cta:hover, +.nav-cta:focus { + transform: translateY(-2px); + box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4); +} + +.menu-toggle { + display: flex; + flex-direction: column; + gap: 6px; + background: none; + border: none; + cursor: pointer; + padding: var(--space-xs); +} + +@media (min-width: 768px) { + .menu-toggle { + display: none; + } +} + +.menu-toggle span { + width: 24px; + height: 2px; + background: var(--color-text); + transition: var(--transition); +} + +.menu-toggle.active span:first-child { + transform: rotate(45deg) translate(6px, 5px); +} + +.menu-toggle.active span:last-child { + transform: rotate(-45deg) translate(6px, -5px); +} + +.mobile-menu { + position: fixed; + top: 0; + inset-inline: 0; + bottom: 0; + background: var(--color-bg); + z-index: 99; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + transition: var(--transition); +} + +.mobile-menu.active { + opacity: 1; + visibility: visible; +} + +.mobile-menu-inner { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-md); +} + +.mobile-link { + font-size: 2rem; + font-weight: 700; + transform: translateY(20px); + opacity: 0; + transition: var(--transition); +} + +.mobile-menu.active .mobile-link { + transform: translateY(0); + opacity: 1; +} + +.mobile-menu.active .mobile-link:nth-child(1) { transition-delay: 0.1s; } +.mobile-menu.active .mobile-link:nth-child(2) { transition-delay: 0.15s; } +.mobile-menu.active .mobile-link:nth-child(3) { transition-delay: 0.2s; } +.mobile-menu.active .mobile-link:nth-child(4) { transition-delay: 0.25s; } + +/* Hero */ +.hero { + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: var(--space-xl) 0; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + z-index: 0; +} + +.gradient-orb { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.4; + will-change: transform; +} + +@media (prefers-reduced-motion: no-preference) { + .gradient-orb { + animation: float 20s infinite ease-in-out; + } +} + +.orb-1 { + width: 500px; + height: 500px; + background: var(--color-primary); + top: -150px; + inset-inline-end: -150px; + animation-delay: 0s; +} + +.orb-2 { + width: 350px; + height: 350px; + background: var(--color-secondary); + bottom: -100px; + inset-inline-start: -100px; + animation-delay: -5s; +} + +.orb-3 { + width: 250px; + height: 250px; + background: var(--color-accent); + top: 50%; + inset-inline-start: 30%; + animation-delay: -10s; + opacity: 0.25; +} + +@keyframes float { + 0%, 100% { + transform: translate(0, 0) scale(1); + } + 33% { + transform: translate(30px, -30px) scale(1.05); + } + 66% { + transform: translate(-20px, 20px) scale(0.95); + } +} + +.grid-overlay { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); + background-size: 60px 60px; +} + +.hero-content { + position: relative; + z-index: 1; + text-align: center; + max-width: 800px; + padding: 0 var(--space-md); +} + +.hero-tag { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: var(--space-xs) var(--space-md); + border-radius: 100px; + font-size: 0.9rem; + margin-bottom: var(--space-md); +} + +.pulse { + width: 8px; + height: 8px; + background: var(--color-success); + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.5; + transform: scale(1.5); + } +} + +.hero-title { + font-size: clamp(2.25rem, 7vw, 4.5rem); + font-weight: 900; + line-height: 1.1; + margin-bottom: var(--space-md); +} + +.title-line { + display: block; +} + +.title-accent { + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-desc { + font-size: clamp(1rem, 2.5vw, 1.2rem); + color: var(--color-text-muted); + max-width: 55ch; + margin-inline: auto; + margin-bottom: var(--space-lg); +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + justify-content: center; +} + +.btn { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-md); + font-weight: 600; + border-radius: var(--radius-sm); + cursor: pointer; + transition: var(--transition); + border: none; + font-size: 1rem; +} + +.btn svg { + width: 18px; + height: 18px; + flex-shrink: 0; +} + +.btn-primary { + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + color: var(--color-text); + position: relative; +} + +.btn-primary:hover, +.btn-primary:focus { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); +} + +.btn-primary:focus-visible { + outline: 3px solid var(--color-accent); + outline-offset: 3px; +} + +.btn-ghost { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--color-text); +} + +.btn-ghost:hover, +.btn-ghost:focus { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.3); +} + +.btn-full { + width: 100%; + justify-content: center; +} + +.scroll-indicator { + position: absolute; + bottom: var(--space-md); + inset-inline-start: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xs); + color: var(--color-text-muted); + font-size: 0.8rem; +} + +[dir="rtl"] .scroll-indicator { + transform: translateX(50%); +} + +.scroll-line { + width: 1px; + height: 40px; + background: linear-gradient(to bottom, var(--color-primary), transparent); + animation: scroll-line 2s infinite; +} + +@keyframes scroll-line { + 0% { + transform: scaleY(0); + transform-origin: top; + } + 50% { + transform: scaleY(1); + transform-origin: top; + } + 51% { + transform-origin: bottom; + } + 100% { + transform: scaleY(0); + transform-origin: bottom; + } +} + +/* Marquee */ +.marquee-section { + padding: var(--space-md) 0; + background: var(--color-bg-alt); + overflow: hidden; +} + +.marquee { + display: flex; + overflow: hidden; +} + +.marquee-track { + display: flex; + gap: var(--space-lg); + animation: marquee 30s linear infinite; + white-space: nowrap; +} + +@media (prefers-reduced-motion: reduce) { + .marquee-track { + animation: none; + } +} + +.marquee-track span { + font-size: 1.5rem; + font-weight: 700; + color: var(--color-text-muted); +} + +.marquee-dot { + color: var(--color-primary); +} + +@keyframes marquee { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +/* Sections */ +.section-header { + text-align: center; + margin-bottom: var(--space-lg); +} + +.section-tag { + display: inline-block; + font-size: 0.85rem; + color: var(--color-primary); + font-weight: 600; + margin-bottom: var(--space-xs); + letter-spacing: 0.05em; +} + +.section-title { + font-size: clamp(1.75rem, 4vw, 2.75rem); + font-weight: 800; + line-height: 1.2; +} + +/* Work Section */ +.work-section { + padding: var(--space-xl) 0; +} + +.work-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); +} + +@media (min-width: 768px) { + .work-grid { + grid-template-columns: repeat(2, 1fr); + } + + .work-card-large { + grid-column: span 2; + } + + .work-card-wide { + grid-column: span 2; + } +} + +@media (min-width: 1024px) { + .work-grid { + grid-template-columns: repeat(3, 1fr); + } + + .work-card-large { + grid-column: span 2; + grid-row: span 2; + } + + .work-card-wide { + grid-column: span 2; + } +} + +.work-card { + position: relative; + border-radius: var(--radius-lg); + overflow: hidden; + background: var(--color-bg-alt); + transition: var(--transition); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.work-card:hover, +.work-card:focus-within { + transform: translateY(-5px); + border-color: rgba(255, 255, 255, 0.1); +} + +.work-card-inner { + display: flex; + flex-direction: column; + height: 100%; +} + +.work-visual { + position: relative; + padding-top: 65%; + overflow: hidden; +} + +.work-card-large .work-visual { + padding-top: 100%; +} + +@media (min-width: 768px) { + .work-card-large .work-visual { + padding-top: 85%; + } +} + +.work-visual-bg { + position: absolute; + inset: 0; + background: linear-gradient(135deg, var(--accent), rgba(0,0,0,0.3)); + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition); +} + +.work-card:hover .work-visual-bg { + transform: scale(1.03); +} + +.work-pattern { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + color: var(--accent); +} + +.work-mockup { + position: relative; + z-index: 1; + filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3)); +} + +.mockup-browser { + width: 85%; + max-width: 320px; + background: #1a1a2e; + border-radius: 8px; + overflow: hidden; +} + +.mockup-header { + display: flex; + gap: 6px; + padding: 8px 12px; + background: #252538; +} + +.mockup-header span { + width: 10px; + height: 10px; + border-radius: 50%; + background: #3a3a4f; +} + +.mockup-header span:first-child { background: #ff5f57; } +.mockup-header span:nth-child(2) { background: #ffbd2e; } +.mockup-header span:nth-child(3) { background: #28ca42; } + +.mockup-content { + padding: 12px; +} + +.mockup-nav { + height: 12px; + background: linear-gradient(90deg, var(--accent), transparent); + border-radius: 4px; + opacity: 0.5; + margin-bottom: 12px; + width: 60%; +} + +.mockup-hero { + height: 60px; + background: linear-gradient(135deg, var(--accent), transparent); + border-radius: 6px; + opacity: 0.3; + margin-bottom: 12px; +} + +.mockup-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; +} + +.mockup-grid div { + height: 40px; + background: var(--accent); + opacity: 0.2; + border-radius: 4px; +} + +.mockup-phone { + width: 130px; + height: 260px; + background: #1a1a2e; + border-radius: 20px; + padding: 8px; + border: 2px solid #2a2a3e; +} + +.mockup-phone-screen { + height: 100%; + background: #0a0a15; + border-radius: 14px; + padding: 12px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.phone-header { + height: 16px; + background: linear-gradient(90deg, var(--accent), transparent); + border-radius: 4px; + opacity: 0.4; +} + +.phone-card { + flex: 1; + background: var(--accent); + border-radius: 8px; + opacity: 0.2; +} + +.mockup-dashboard { + width: 90%; + max-width: 300px; + height: 180px; + background: #1a1a2e; + border-radius: 8px; + display: flex; + overflow: hidden; +} + +.dash-sidebar { + width: 40px; + background: #252538; +} + +.dash-main { + flex: 1; + padding: 12px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.dash-chart { + flex: 1; + background: linear-gradient(135deg, var(--accent), transparent); + border-radius: 6px; + opacity: 0.3; +} + +.dash-stats { + display: flex; + gap: 8px; +} + +.dash-stats div { + flex: 1; + height: 30px; + background: var(--accent); + opacity: 0.2; + border-radius: 4px; +} + +.mockup-ecom { + width: 100%; + max-width: 340px; +} + +.ecom-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; +} + +.ecom-product { + aspect-ratio: 3/4; + background: linear-gradient(135deg, var(--accent), transparent); + border-radius: 8px; + opacity: 0.3; +} + +.work-info { + padding: var(--space-md); +} + +.work-category { + display: inline-block; + font-size: 0.8rem; + color: var(--color-primary); + font-weight: 600; + letter-spacing: 0.05em; + margin-bottom: var(--space-xs); +} + +.work-title { + font-size: 1.4rem; + font-weight: 700; + margin-bottom: var(--space-xs); +} + +.work-desc { + color: var(--color-text-muted); + font-size: 0.95rem; + margin-bottom: var(--space-sm); + max-width: 45ch; +} + +.work-tags { + display: flex; + flex-wrap: wrap; + gap: var(--space-xs); +} + +.work-tags span { + font-size: 0.75rem; + padding: 4px 12px; + background: rgba(99, 102, 241, 0.1); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: 100px; + color: var(--color-primary); +} + +/* Stats Section */ +.stats-section { + padding: var(--space-lg) 0; + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); +} + +.stats-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); + text-align: center; +} + +@media (min-width: 640px) { + .stats-grid { + grid-template-columns: 2fr 1fr 1fr; + align-items: center; + } +} + +.stat { + padding: var(--space-md); +} + +.stat-featured { + background: rgba(255, 255, 255, 0.1); + border-radius: var(--radius-lg); + padding: var(--space-lg) var(--space-md); +} + +@media (min-width: 640px) { + .stat-featured { + grid-row: span 1; + } +} + +.stat-number { + font-size: clamp(2.25rem, 5vw, 3.5rem); + font-weight: 900; + display: inline; +} + +.stat-featured .stat-number { + font-size: clamp(3rem, 7vw, 5rem); +} + +.stat-suffix, +.stat-plus { + font-size: clamp(1.25rem, 3vw, 1.75rem); + font-weight: 700; +} + +.stat-featured .stat-suffix, +.stat-featured .stat-plus { + font-size: clamp(1.5rem, 4vw, 2.5rem); +} + +.stat-label { + display: block; + font-size: 0.9rem; + opacity: 0.95; + margin-top: var(--space-xs); +} + +.stat-featured .stat-label { + font-size: 1.1rem; + font-weight: 500; +} + +/* Services Section */ +.services-section { + padding: var(--space-xl) 0; + background: var(--color-bg-alt); +} + +.services-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); +} + +@media (min-width: 640px) { + .services-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .services-grid { + grid-template-columns: repeat(4, 1fr); + } +} + +.service-card { + position: relative; + background: var(--color-bg); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: var(--radius-lg); + padding: var(--space-md); + transition: var(--transition); +} + +.service-card:hover, +.service-card:focus-within { + border-color: var(--color-primary); + transform: translateY(-5px); +} + +.service-card-featured { + border-color: var(--color-primary); + background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.05)); +} + +.service-badge { + position: absolute; + top: var(--space-sm); + inset-inline-end: var(--space-sm); + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + color: white; + font-size: 0.7rem; + font-weight: 600; + padding: 4px 10px; + border-radius: 100px; +} + +.service-icon { + width: 48px; + height: 48px; + margin-bottom: var(--space-sm); +} + +.service-icon svg { + width: 100%; + height: 100%; + color: var(--color-primary); +} + +.service-title { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: var(--space-xs); +} + +.service-desc { + color: var(--color-text-muted); + margin-bottom: var(--space-sm); + font-size: 0.9rem; + line-height: 1.6; +} + +.service-list { + list-style: none; +} + +.service-list li { + position: relative; + padding-inline-start: var(--space-md); + margin-bottom: var(--space-xs); + color: var(--color-text-muted); + font-size: 0.9rem; +} + +.service-list li::before { + content: '✦'; + position: absolute; + inset-inline-start: 0; + color: var(--color-primary); + font-size: 0.6rem; + top: 0.3em; +} + +/* Process Section */ +.process-section { + padding: var(--space-xl) 0; +} + +.process-timeline { + position: relative; + max-width: 600px; + margin-inline: auto; +} + +.process-line { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 30px; + width: 2px; + background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary), var(--color-accent)); +} + +@media (min-width: 768px) { + .process-line { + inset-inline-start: 50%; + margin-inline-start: -1px; + } +} + +.process-step { + position: relative; + padding-inline-start: 80px; + padding-bottom: var(--space-lg); +} + +@media (min-width: 768px) { + .process-step { + padding-inline-start: 0; + width: 50%; + padding-inline-end: var(--space-lg); + } + + .process-step:nth-child(even) { + margin-inline-start: auto; + padding-inline-start: var(--space-lg); + padding-inline-end: 0; + } +} + +.process-number { + position: absolute; + inset-inline-start: 10px; + top: 0; + width: 40px; + height: 40px; + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 0.9rem; +} + +@media (min-width: 768px) { + .process-number { + inset-inline-start: auto; + inset-inline-end: -20px; + } + + .process-step:nth-child(even) .process-number { + inset-inline-end: auto; + inset-inline-start: -20px; + } +} + +.process-content h3 { + font-size: 1.2rem; + font-weight: 700; + margin-bottom: var(--space-xs); +} + +.process-content p { + color: var(--color-text-muted); + font-size: 0.95rem; +} + +/* About Section */ +.about-section { + padding: var(--space-xl) 0; + background: var(--color-bg-alt); +} + +.about-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-lg); + align-items: center; +} + +@media (min-width: 768px) { + .about-grid { + grid-template-columns: 1fr 1fr; + } +} + +.about-visual { + display: flex; + justify-content: center; +} + +.about-shape { + width: 100%; + max-width: 350px; +} + +.about-shape svg { + width: 100%; + height: auto; +} + +@media (prefers-reduced-motion: no-preference) { + .rotate-slow { + animation: rotate 30s linear infinite; + transform-origin: center; + } + + .rotate-slow-reverse { + animation: rotate 20s linear infinite reverse; + transform-origin: center; + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.about-content { + order: -1; +} + +@media (min-width: 768px) { + .about-content { + order: 0; + } +} + +.about-text { + color: var(--color-text-muted); + margin-bottom: var(--space-md); + font-size: 1.05rem; + max-width: 55ch; +} + +.about-features { + display: flex; + flex-wrap: wrap; + gap: var(--space-md); + margin-top: var(--space-md); +} + +.about-feature { + display: flex; + align-items: center; + gap: var(--space-xs); +} + +.feature-icon { + color: var(--color-primary); +} + +/* Contact Section */ +.contact-section { + position: relative; + padding: var(--space-xl) 0; + overflow: hidden; +} + +.contact-bg { + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; +} + +.orb-contact-1 { + width: 400px; + height: 400px; + background: var(--color-primary); + top: -150px; + inset-inline-end: -150px; +} + +.orb-contact-2 { + width: 300px; + height: 300px; + background: var(--color-secondary); + bottom: -150px; + inset-inline-start: -150px; +} + +.contact-wrapper { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: 1fr; + gap: var(--space-lg); + align-items: start; +} + +@media (min-width: 768px) { + .contact-wrapper { + grid-template-columns: 1fr 1fr; + } +} + +.contact-info { + max-width: 500px; +} + +.contact-text { + color: var(--color-text-muted); + margin-bottom: var(--space-md); + font-size: 1.05rem; + max-width: 50ch; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: var(--space-sm); + margin-bottom: var(--space-lg); +} + +.contact-detail { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + color: var(--color-text-muted); + padding: var(--space-xs) 0; +} + +.contact-detail-icon { + width: 24px; + height: 24px; + flex-shrink: 0; + color: var(--color-primary); +} + +.contact-detail-icon svg { + width: 100%; + height: 100%; +} + +.contact-cta { + background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1)); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-md); + padding: var(--space-md); +} + +.contact-cta-text { + font-size: 1.2rem; + font-weight: 700; + margin-bottom: var(--space-xs); +} + +.contact-cta-sub { + color: var(--color-text-muted); + font-size: 0.95rem; +} + +.contact-form { + background: var(--color-bg-alt); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: var(--radius-lg); + padding: var(--space-lg); +} + +.form-group { + position: relative; + margin-bottom: var(--space-md); +} + +.form-group label { + display: block; + font-size: 0.9rem; + font-weight: 500; + margin-bottom: var(--space-xs); + color: var(--color-text-muted); +} + +.form-group .required { + color: var(--color-secondary); +} + +.form-group input, +.form-group textarea { + width: 100%; + background: transparent; + border: none; + border-bottom: 2px solid rgba(255, 255, 255, 0.15); + padding: var(--space-sm) 0; + color: var(--color-text); + transition: var(--transition); + outline: none; +} + +.form-group input:focus, +.form-group textarea:focus { + border-color: var(--color-primary); +} + +.form-group input.error, +.form-group textarea.error { + border-color: var(--color-error); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.form-line { + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 0; + height: 2px; + background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); + transition: var(--transition); +} + +.form-group input:focus ~ .form-line, +.form-group textarea:focus ~ .form-line { + width: 100%; +} + +.form-error { + display: block; + font-size: 0.8rem; + color: var(--color-error); + margin-top: var(--space-xs); + min-height: 1.2em; +} + +/* Footer */ +.footer { + background: var(--color-bg-alt); + border-top: 1px solid rgba(255, 255, 255, 0.05); + padding: var(--space-lg) 0 var(--space-md); +} + +.footer-main { + display: flex; + flex-direction: column; + gap: var(--space-md); + align-items: center; + text-align: center; + margin-bottom: var(--space-md); +} + +@media (min-width: 768px) { + .footer-main { + flex-direction: row; + justify-content: space-between; + text-align: start; + } +} + +.footer-tagline { + color: var(--color-text-muted); + margin-top: var(--space-xs); +} + +.footer-links { + display: flex; + flex-wrap: wrap; + gap: var(--space-md); + justify-content: center; +} + +.footer-links a { + color: var(--color-text-muted); + transition: var(--transition); +} + +.footer-links a:hover, +.footer-links a:focus { + color: var(--color-primary); +} + +.footer-bottom { + padding-top: var(--space-md); + border-top: 1px solid rgba(255, 255, 255, 0.05); + text-align: center; + color: var(--color-text-muted); + font-size: 0.9rem; +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.8s ease, transform 0.8s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +@media (prefers-reduced-motion: reduce) { + .reveal { + opacity: 1; + transform: none; + } +} + +/* Focus States */ +a:focus-visible, +button:focus-visible, +input:focus-visible, +textarea:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} \ No newline at end of file