diff --git a/index.html b/index.html new file mode 100644 index 0000000..572d25a --- /dev/null +++ b/index.html @@ -0,0 +1,369 @@ + + + + + + משה האינסטלטור | שירותי אינסטלציה בבני ברק 24/7 + + + + + + + + + + + + + + +
+
+ + + +
+ +
+ +
+
+
+
+ + זמינים עכשיו — 24/7 +
+

+ צנרת תקועה? + אנחנו בדרך. +

+

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

+
+ + + התקשרו עכשיו + + השאירו פרטים +
+
+ +
+ +
+
+
+ השירותים שלנו +

פתרונות לכל בעיית אינסטלציה

+
+
+
+
+ +
+
+

שירות חירום 24/7

+

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

+
+
הכי מבוקש
+
+ +
+
+ +
+
+

איתור ותיקון נזילות

+

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

+
+
+ +
+
+ +
+
+

פתיחת סתימות

+

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

+
+
+ +
+
+ +
+
+

התקנות חדשות

+

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

+
+
+ +
+
+ +
+
+

תחזוקה מונעת

+

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

+
+
+ +
+
+ +
+
+

החלפת צנרת

+

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

+
+
+
+
+
+ +
+
+
+
+
+ למה לבחור בנו +

מקצועיות שמרגישים מהרגע הראשון

+
+
    +
  • + +
    +

    מכירים את בני ברק

    +

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

    +
    +
    • +
  • + +
    +

    מחירים הוגנים ושקופים

    +

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

    +
    +
    • +
  • + +
    +

    ציוד מקצועי ומתקדם

    +

    משתמשים בכלים ובטכנולוגיות העדכניות ביותר לפתרון מהיר ויעיל.

    +
    +
    • +
  • + +
    +

    אחריות על העבודה

    +

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

    +
    +
    • +
+
+
+
+
+
24/7
+
זמינות מלאה
+
+
+
~30דק׳
+
זמן הגעה ממוצע
+
+
+
15+
+
שנות ניסיון
+
+
+
בני ברק והסביבה
+
אזור השירות
+
+
+
+
+
+
+ +
+
+
+
+
+ צרו קשר +

בעיה באינסטלציה?
אנחנו כאן בשבילכם

+
+

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

+
+ +
+ +
+
+ טלפון + 052-712-3456 +
+ +
+
+ +
+
+ אזור שירות + בני ברק, רמת גן, גבעת שמואל +
+
+
+
+
+
+ + + נא להזין שם +
+
+ + + נא להזין מספר טלפון תקין +
+
+ + + נא לבחור סוג שירות +
+
+ + +
+ +

נחזור אליכם תוך מספר דקות

+ +
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..753fe90 --- /dev/null +++ b/script.js @@ -0,0 +1,175 @@ +(function() { + 'use strict'; + + // Mobile Menu Toggle + var mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); + var mobileMenu = document.getElementById('mobile-menu'); + + if (mobileMenuToggle && mobileMenu) { + mobileMenuToggle.addEventListener('click', function() { + var isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + mobileMenu.hidden = isExpanded; + + // Animate hamburger + var lines = this.querySelectorAll('.hamburger-line'); + if (!isExpanded) { + lines[0].style.transform = 'rotate(45deg) translate(5px, 5px)'; + lines[1].style.opacity = '0'; + lines[2].style.transform = 'rotate(-45deg) translate(5px, -5px)'; + } else { + lines[0].style.transform = ''; + lines[1].style.opacity = ''; + lines[2].style.transform = ''; + } + }); + + // Close menu when clicking a link + mobileMenu.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + mobileMenuToggle.setAttribute('aria-expanded', 'false'); + mobileMenu.hidden = true; + var lines = mobileMenuToggle.querySelectorAll('.hamburger-line'); + lines[0].style.transform = ''; + lines[1].style.opacity = ''; + lines[2].style.transform = ''; + }); + }); + } + + // Scroll Reveal + var revealElements = document.querySelectorAll('.service-card, .benefit-item, .stat-card, .section-header'); + + if ('IntersectionObserver' in window) { + var revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('reveal', 'revealed'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(function(el, index) { + el.classList.add('reveal'); + el.style.transitionDelay = Math.min((index % 4) * 0.08, 0.3) + 's'; + revealObserver.observe(el); + }); + } else { + revealElements.forEach(function(el) { + el.classList.add('reveal', 'revealed'); + }); + } + + // Form Validation + var contactForm = document.getElementById('contact-form'); + var formStatus = document.getElementById('form-status'); + + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + var isValid = true; + var formGroups = this.querySelectorAll('.form-group'); + + formGroups.forEach(function(group) { + group.classList.remove('has-error'); + }); + + // Validate name + var nameInput = this.querySelector('#name'); + if (nameInput && nameInput.value.trim().length < 2) { + nameInput.closest('.form-group').classList.add('has-error'); + isValid = false; + } + + // Validate phone + var phoneInput = this.querySelector('#phone'); + var phoneRegex = /^[\d\-+\s()]{9,}$/; + if (phoneInput && !phoneRegex.test(phoneInput.value.trim())) { + phoneInput.closest('.form-group').classList.add('has-error'); + isValid = false; + } + + // Validate service selection + var serviceSelect = this.querySelector('#service'); + if (serviceSelect && !serviceSelect.value) { + serviceSelect.closest('.form-group').classList.add('has-error'); + isValid = false; + } + + if (isValid) { + // Announce to screen readers + if (formStatus) { + formStatus.textContent = 'הבקשה נשלחה בהצלחה. ניצור איתכם קשר בהקדם.'; + } + + // Show success message + contactForm.innerHTML = + '
' + + '' + + '

הבקשה נשלחה בהצלחה!

' + + '

ניצור איתכם קשר בהקדם האפשרי

' + + '
'; + } + }); + + // Real-time validation feedback + var inputs = contactForm.querySelectorAll('.form-input'); + inputs.forEach(function(input) { + input.addEventListener('blur', function() { + var group = this.closest('.form-group'); + if (this.required && !this.value.trim()) { + group.classList.add('has-error'); + } else { + group.classList.remove('has-error'); + } + }); + + input.addEventListener('input', function() { + this.closest('.form-group').classList.remove('has-error'); + }); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + var targetId = this.getAttribute('href'); + if (targetId === '#') return; + + var target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + var headerOffset = 80; + var elementPosition = target.getBoundingClientRect().top; + var offsetPosition = elementPosition + window.pageYOffset - headerOffset; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + }); + }); + + // Header background on scroll + var header = document.querySelector('.site-header'); + if (header) { + window.addEventListener('scroll', function() { + var currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.background = 'rgba(10, 22, 40, 0.98)'; + } else { + header.style.background = 'rgba(10, 22, 40, 0.9)'; + } + }, { passive: true }); + } +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..23e0179 --- /dev/null +++ b/style.css @@ -0,0 +1,1048 @@ +:root { + --navy: #0a1628; + --navy-light: #1a2d4a; + --navy-lighter: #2a4066; + --cyan: #00d4ff; + --cyan-light: #5ce1ff; + --cyan-dark: #00a8cc; + --cyan-glow: rgba(0, 212, 255, 0.3); + --white: #ffffff; + --gray-100: #f0f4f8; + --gray-200: #d9e2ec; + --gray-300: #bcccdc; + --gray-400: #829ab1; + + --font-display: 'Rubik', sans-serif; + --font-body: 'Heebo', sans-serif; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4rem; + --space-2xl: 6rem; + + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 20px; + --radius-full: 50px; + + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 400ms ease; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +body { + font-family: var(--font-body); + font-size: 1rem; + font-weight: 400; + line-height: 1.7; + color: var(--gray-100); + background: var(--navy); + overflow-x: hidden; +} + +/* Visually Hidden (for screen readers) */ +.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; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + left: 50%; + transform: translateX(-50%); + background: var(--cyan); + color: var(--navy); + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-sm); + font-weight: 500; + z-index: 10000; + text-decoration: none; +} + +.skip-link:focus { + top: var(--space-sm); +} + +.grain-overlay { + position: fixed; + inset: 0; + pointer-events: none; + opacity: 0.03; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); + z-index: 9999; +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +/* Typography */ +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.2; +} + +h1 { font-size: clamp(2.5rem, 6vw, 4rem); } +h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); } +h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); } + +/* Header */ +.site-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: rgba(10, 22, 40, 0.9); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.header-container { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-sm) var(--space-md); + max-width: 1200px; + margin-inline: auto; +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-xs); + text-decoration: none; + color: var(--white); +} + +.logo-icon { + width: 40px; + height: 40px; + color: var(--cyan); +} + +.logo-text { + font-family: var(--font-display); + font-size: 1.125rem; + font-weight: 500; +} + +.nav-list { + display: flex; + align-items: center; + gap: var(--space-lg); + list-style: none; +} + +.nav-list a { + color: var(--gray-200); + text-decoration: none; + font-size: 0.9375rem; + font-weight: 500; + transition: color var(--transition-fast); +} + +.nav-list a:hover, +.nav-list a:focus { + color: var(--cyan); +} + +.nav-cta { + background: var(--cyan); + color: var(--navy) !important; + padding: var(--space-xs) var(--space-md); + border-radius: var(--radius-full); + font-weight: 600 !important; + direction: ltr; +} + +.nav-cta:hover, +.nav-cta:focus { + background: var(--white) !important; + color: var(--navy) !important; +} + +.mobile-menu-toggle { + display: none; + flex-direction: column; + gap: 5px; + padding: var(--space-xs); + background: transparent; + border: none; + cursor: pointer; +} + +.hamburger-line { + width: 24px; + height: 2px; + background: var(--white); + transition: transform var(--transition-base), opacity var(--transition-base); +} + +.mobile-nav { + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--navy-light); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + padding: var(--space-md); +} + +.mobile-nav[hidden] { + display: none; +} + +.mobile-nav-list { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.mobile-nav-list a { + display: block; + color: var(--white); + text-decoration: none; + padding: var(--space-sm); + border-radius: var(--radius-sm); + transition: background var(--transition-fast); +} + +.mobile-nav-list a:hover, +.mobile-nav-list a:focus { + background: rgba(255, 255, 255, 0.05); +} + +.mobile-phone-link { + background: rgba(0, 212, 255, 0.1) !important; + color: var(--cyan) !important; + font-weight: 500; + text-align: center; +} + +@media (max-width: 768px) { + .main-nav { + display: none; + } + + .mobile-menu-toggle { + display: flex; + } +} + +/* Hero */ +.hero { + min-height: 100vh; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: var(--space-xl); + padding: calc(80px + var(--space-xl)) var(--space-md) var(--space-xl); + max-width: 1400px; + margin-inline: auto; +} + +.hero-content { + padding-inline-start: var(--space-lg); +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + background: rgba(0, 212, 255, 0.1); + border: 1px solid rgba(0, 212, 255, 0.2); + padding: var(--space-xs) var(--space-md); + border-radius: var(--radius-full); + font-size: 0.875rem; + color: var(--cyan-light); + margin-bottom: var(--space-md); +} + +.badge-dot { + width: 8px; + height: 8px; + background: var(--cyan); + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(1.2); } +} + +.hero-title { + margin-bottom: var(--space-md); +} + +.title-line { + display: block; +} + +.title-accent { + color: var(--cyan); +} + +.hero-subtitle { + font-size: 1.125rem; + color: var(--gray-300); + max-width: 480px; + margin-bottom: var(--space-lg); +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-lg); + border-radius: var(--radius-full); + font-family: var(--font-display); + font-size: 1rem; + font-weight: 500; + text-decoration: none; + border: none; + cursor: pointer; + transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-fast); +} + +.btn:focus-visible { + outline: 3px solid var(--cyan); + outline-offset: 3px; +} + +.btn-primary { + background: var(--cyan); + color: var(--navy); +} + +.btn-primary:hover { + background: var(--white); + transform: translateY(-2px); + box-shadow: 0 10px 40px var(--cyan-glow); +} + +.btn-secondary { + background: transparent; + color: var(--white); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.4); +} + +.btn-secondary:focus-visible { + outline: 3px solid var(--white); + outline-offset: 3px; +} + +.btn-icon { + width: 20px; + height: 20px; +} + +.btn-icon-arrow { + transition: transform var(--transition-fast); +} + +.btn:hover .btn-icon-arrow { + transform: translateX(-4px); +} + +.btn-full { + width: 100%; +} + +/* Hero Visual */ +.hero-visual { + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.pipe-system { + width: 100%; + max-width: 400px; + aspect-ratio: 1; +} + +.pipe-svg { + width: 100%; + height: 100%; +} + +.pipe { + stroke-dasharray: 500; + stroke-dashoffset: 500; + animation: drawPipe 2s ease forwards; +} + +.pipe-1 { animation-delay: 0s; } +.pipe-2 { animation-delay: 0.5s; } +.pipe-3 { animation-delay: 1s; } + +@keyframes drawPipe { + to { stroke-dashoffset: 0; } +} + +.joint { + opacity: 0; + animation: fadeIn 0.5s ease forwards; +} + +.pipe-svg .joint:nth-child(4) { animation-delay: 0.5s; } +.pipe-svg .joint:nth-child(5) { animation-delay: 1s; } +.pipe-svg .joint:nth-child(6) { animation-delay: 1.5s; } + +@keyframes fadeIn { + to { opacity: 1; } +} + +.water-drop { + opacity: 0; +} + +.drop-1 { + animation: flowDrop1 3s ease-in-out 2s infinite; +} + +.drop-2 { + animation: flowDrop2 3s ease-in-out 2.5s infinite; +} + +.drop-3 { + animation: flowDrop3 3s ease-in-out 3s infinite; +} + +@keyframes flowDrop1 { + 0% { opacity: 0; transform: translate(50px, 200px); } + 10% { opacity: 1; } + 50% { opacity: 1; transform: translate(250px, 100px); } + 90% { opacity: 1; } + 100% { opacity: 0; transform: translate(350px, 200px); } +} + +@keyframes flowDrop2 { + 0% { opacity: 0; transform: translate(50px, 200px); } + 10% { opacity: 1; } + 50% { opacity: 1; transform: translate(150px, 200px); } + 90% { opacity: 1; } + 100% { opacity: 0; transform: translate(150px, 300px); } +} + +@keyframes flowDrop3 { + 0% { opacity: 0; transform: translate(150px, 300px); } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { opacity: 0; transform: translate(300px, 300px); } +} + +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + text-align: center; + padding-top: calc(80px + var(--space-lg)); + } + + .hero-content { + padding-inline-start: 0; + } + + .hero-subtitle { + margin-inline: auto; + } + + .hero-actions { + justify-content: center; + } + + .hero-visual { + order: -1; + } + + .pipe-system { + max-width: 280px; + } +} + +/* Section Styles */ +.section-header { + text-align: center; + margin-bottom: var(--space-xl); +} + +.section-header-start { + text-align: start; +} + +.section-tag { + display: inline-block; + color: var(--cyan-light); + font-size: 0.9375rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: var(--space-sm); +} + +.section-title { + color: var(--white); +} + +/* Services */ +.services { + padding: var(--space-2xl) 0; + background: linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 100%); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: var(--space-md); +} + +.service-card { + position: relative; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: var(--radius-lg); + padding: var(--space-lg); + grid-column: span 4; + transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); +} + +.service-card:hover { + transform: translateY(-4px); + border-color: rgba(0, 212, 255, 0.2); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); +} + +.service-card-featured { + grid-column: span 6; + background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 168, 204, 0.05) 100%); + border-color: rgba(0, 212, 255, 0.2); +} + +.service-card-wide { + grid-column: span 6; +} + +.service-card-half { + grid-column: span 6; +} + +@media (max-width: 1024px) { + .service-card { + grid-column: span 6; + } + + .service-card-featured, + .service-card-wide, + .service-card-half { + grid-column: span 12; + } +} + +@media (max-width: 600px) { + .service-card, + .service-card-featured, + .service-card-wide, + .service-card-half { + grid-column: span 12; + } +} + +.card-badge { + position: absolute; + top: var(--space-md); + inset-inline-start: var(--space-md); + background: var(--cyan); + color: var(--navy); + font-size: 0.75rem; + font-weight: 500; + padding: 4px 12px; + border-radius: var(--radius-full); +} + +.card-icon { + width: 48px; + height: 48px; + color: var(--cyan); + margin-bottom: var(--space-md); +} + +.card-icon svg { + width: 100%; + height: 100%; +} + +.card-title { + color: var(--white); + margin-bottom: var(--space-xs); +} + +.card-text { + color: var(--gray-300); + font-size: 0.9375rem; + max-width: 50ch; +} + +/* Why Us */ +.why-us { + padding: var(--space-2xl) 0; + background: var(--navy-light); +} + +.why-us-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-xl); + align-items: start; +} + +.benefits-list { + list-style: none; + margin-top: var(--space-lg); +} + +.benefit-item { + display: flex; + gap: var(--space-md); + padding: var(--space-md) 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.benefit-item:last-child { + border-bottom: none; +} + +.benefit-number { + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 500; + color: var(--cyan); + opacity: 0.4; + min-width: 48px; +} + +.benefit-content h3 { + color: var(--white); + margin-bottom: 4px; + font-weight: 500; +} + +.benefit-content p { + color: var(--gray-300); + font-size: 0.9375rem; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-md); +} + +.stat-card { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: var(--radius-md); + padding: var(--space-lg); + text-align: center; + transition: border-color var(--transition-base); +} + +.stat-card:hover { + border-color: rgba(0, 212, 255, 0.2); +} + +.stat-card-highlight { + background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 168, 204, 0.05) 100%); + border-color: rgba(0, 212, 255, 0.2); +} + +.stat-value { + font-family: var(--font-display); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 600; + color: var(--cyan); + line-height: 1; + margin-bottom: var(--space-xs); +} + +.stat-value-text { + font-size: clamp(1rem, 2vw, 1.25rem); +} + +.stat-unit { + font-size: 0.5em; + font-weight: 400; + margin-inline-start: 0.1em; +} + +.stat-label { + color: var(--gray-300); + font-size: 0.9375rem; +} + +@media (max-width: 900px) { + .why-us-layout { + grid-template-columns: 1fr; + } + + .why-us-visual { + order: -1; + } +} + +/* Contact */ +.contact { + padding: var(--space-2xl) 0; + background: var(--navy); +} + +.contact-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-xl); + align-items: start; +} + +.contact-text { + color: var(--gray-300); + margin-top: var(--space-md); + margin-bottom: var(--space-lg); +} + +.contact-methods { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.contact-method { + display: flex; + align-items: center; + gap: var(--space-md); + text-decoration: none; + color: inherit; + border-radius: var(--radius-md); + padding: var(--space-sm); + margin: calc(var(--space-sm) * -1); + transition: background var(--transition-fast); +} + +.contact-method-phone:hover, +.contact-method-phone:focus { + background: rgba(0, 212, 255, 0.1); +} + +.contact-method-phone:focus-visible { + outline: 3px solid var(--cyan); + outline-offset: 2px; +} + +.method-icon { + width: 48px; + height: 48px; + background: rgba(0, 212, 255, 0.1); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + color: var(--cyan); + flex-shrink: 0; +} + +.method-icon svg { + width: 24px; + height: 24px; +} + +.method-label { + display: block; + font-size: 0.875rem; + color: var(--gray-400); +} + +.method-value { + display: block; + color: var(--white); + font-weight: 500; +} + +.contact-method-phone .method-value { + font-size: 1.25rem; + direction: ltr; + display: inline-block; +} + +/* Form */ +.contact-form { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: var(--radius-lg); + padding: var(--space-lg); +} + +.form-group { + margin-bottom: var(--space-md); + position: relative; +} + +.form-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: var(--gray-200); + margin-bottom: var(--space-xs); +} + +.label-optional { + font-weight: 400; + color: var(--gray-400); +} + +.form-input { + width: 100%; + padding: var(--space-sm) var(--space-md); + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-sm); + color: var(--white); + font-family: var(--font-body); + font-size: 1rem; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.form-input::placeholder { + color: var(--gray-400); +} + +.form-input:focus { + outline: none; + border-color: var(--cyan); + box-shadow: 0 0 0 3px var(--cyan-glow); +} + +.form-input.error { + border-color: #ff4757; +} + +.form-select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23bcccdc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left var(--space-sm) center; + background-size: 20px; + padding-inline-end: var(--space-xl); +} + +.form-textarea { + resize: vertical; + min-height: 100px; +} + +.form-error { + display: none; + font-size: 0.8125rem; + color: #ff6b7a; + margin-top: 4px; +} + +.form-group.has-error .form-error { + display: block; +} + +.form-group.has-error .form-input { + border-color: #ff4757; +} + +.form-note { + text-align: center; + font-size: 0.9375rem; + color: var(--gray-300); + margin-top: var(--space-sm); +} + +@media (max-width: 900px) { + .contact-layout { + grid-template-columns: 1fr; + } +} + +/* Footer */ +.site-footer { + background: var(--navy-light); + border-top: 1px solid rgba(255, 255, 255, 0.05); + padding: var(--space-xl) 0 var(--space-lg); +} + +.footer-content { + display: flex; + align-items: flex-start; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--space-lg); + padding-bottom: var(--space-lg); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + margin-bottom: var(--space-md); +} + +.footer-main { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.footer-brand { + display: flex; + align-items: center; + gap: var(--space-xs); + color: var(--white); + font-weight: 500; +} + +.footer-logo { + width: 32px; + height: 32px; + color: var(--cyan); +} + +.footer-tagline { + color: var(--gray-400); + font-size: 0.875rem; +} + +.footer-contact { + text-align: start; +} + +.footer-phone { + display: block; + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 600; + color: var(--cyan); + text-decoration: none; + direction: ltr; + transition: color var(--transition-fast); +} + +.footer-phone:hover, +.footer-phone:focus { + color: var(--white); +} + +.footer-availability { + display: block; + font-size: 0.875rem; + color: var(--gray-400); +} + +.footer-bottom { + text-align: center; +} + +.footer-copy { + color: var(--gray-400); + font-size: 0.875rem; +} + +@media (max-width: 600px) { + .footer-content { + flex-direction: column; + align-items: center; + text-align: center; + } + + .footer-contact { + text-align: center; + } +} + +/* Reveal Animations */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.reveal.revealed { + opacity: 1; + transform: translateY(0); +} + +/* Success Message */ +.form-success { + text-align: center; + padding: var(--space-xl); +} + +.form-success-icon { + width: 64px; + height: 64px; + color: var(--cyan); + margin-bottom: var(--space-md); +} + +.form-success h3 { + color: var(--white); + margin-bottom: var(--space-xs); +} + +.form-success p { + color: var(--gray-300); +}