commit 8062eed06331db5401a5b6329a37406aea356916 Author: Claude Project Manager Date: Thu Jul 17 17:17:39 2025 +0200 Initial commit diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..93859a8 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,15 @@ +{ + "permissions": { + "allow": [ + "Bash(grep:*)", + "Bash(mkdir:*)", + "Bash(ls:*)", + "Bash(git lfs:*)", + "Bash(sudo apt-get:*)", + "Bash(sudo apt-get install:*)", + "Bash(git add:*)", + "Bash(rm:*)" + ], + "deny": [] + } +} \ No newline at end of file diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..59d0350 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Video files +# Large image files diff --git a/CLAUDE_PROJECT_README.md b/CLAUDE_PROJECT_README.md new file mode 100644 index 0000000..4cd49f5 --- /dev/null +++ b/CLAUDE_PROJECT_README.md @@ -0,0 +1,56 @@ +# website-main + +*This README was automatically generated by Claude Project Manager* + +## Project Overview + +- **Path**: `A:/GiTea/website-main` +- **Files**: 11 files +- **Size**: 103.7 KB +- **Last Modified**: 2025-07-12 15:48 + +## Technology Stack + +### Languages +- JavaScript + +## Project Structure + +``` +CLAUDE_PROJECT_README.md +de.svg +en.svg +index.html +README.md +robots.txt +script.js +styles.css +Logo/ + ├── intelsight-dark-no-tagline-website-cropped.svg + ├── intelsight-dark-no-tagline-website.svg + └── intelsight-icon-transparent-dark.svg +``` + +## Key Files + +- `README.md` + +## Claude Integration + +This project is managed with Claude Project Manager. To work with this project: + +1. Open Claude Project Manager +2. Click on this project's tile +3. Claude will open in the project directory + +## Notes + +*Add your project-specific notes here* + +--- + +## Development Log + +- README generated on 2025-07-03 23:25:48 +- README updated on 2025-07-12 15:48:18 +- README updated on 2025-07-16 22:31:38 diff --git a/Logo/intelsight-dark-no-tagline-website-cropped.svg b/Logo/intelsight-dark-no-tagline-website-cropped.svg new file mode 100644 index 0000000..1fcb5e5 --- /dev/null +++ b/Logo/intelsight-dark-no-tagline-website-cropped.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + IntelSight + + \ No newline at end of file diff --git a/Logo/intelsight-dark-no-tagline-website.svg b/Logo/intelsight-dark-no-tagline-website.svg new file mode 100644 index 0000000..41ead70 --- /dev/null +++ b/Logo/intelsight-dark-no-tagline-website.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + IntelSight + + \ No newline at end of file diff --git a/Logo/intelsight-icon-transparent-dark.svg b/Logo/intelsight-icon-transparent-dark.svg new file mode 100644 index 0000000..69f6cd9 --- /dev/null +++ b/Logo/intelsight-icon-transparent-dark.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..1fd62cb --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# website diff --git a/de.svg b/de.svg new file mode 100644 index 0000000..20a017e --- /dev/null +++ b/de.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/en.svg b/en.svg new file mode 100644 index 0000000..016c075 --- /dev/null +++ b/en.svg @@ -0,0 +1,50 @@ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..09d1af8 --- /dev/null +++ b/index.html @@ -0,0 +1,375 @@ + + + + + + IntelSight - Sicherheit Made in Germany + + + + + + + + Zum Hauptinhalt springen + + + + + +
+ +
+ +
+

+ IntelSight + SICHERHEIT MADE IN GERMANY +

+

Fortschrittliche Software für moderne Strafverfolgung

+ +
+ + +
+
+ +
+
+ 0% + Verfügbarkeit +
+
+ 0+ + Behörden vertrauen uns +
+
+ 0/7 + Support +
+
+
+ + +
+
+

Der Digitale Takt

+

Ein Tag mit IntelSight

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

Schichtbeginn

+

Automatische Zusammenfassung der Nacht-Ereignisse

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

Echtzeit-Analyse

+

KI-gestützte Mustererkennung in laufenden Fällen

+
+
+ +
+
+ + + +
+
+

Präventive Sicherheit

+

Vorhersage-Algorithmen identifizieren Risikobereiche

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

Tagesbericht

+

Automatisierte Dokumentation und Übergabe

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

Intelligenz visualisiert

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

Ende-zu-Ende Verschlüsselung

+

Militärgrade Sicherheit für sensible Daten

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

KI-Analyse

+

Mustererkennung in Echtzeit

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

Nahtlose Integration

+

Verbindung zu bestehenden Systemen

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

100% DSGVO-konform

+

Entwickelt nach deutschem Datenschutzrecht

+
+
+
+
+
+
+ + +
+
+

Deutsche Ingenieurskunst

+
+
+
+
+ + + +
+

Geschwindigkeit

+

Millisekunden-Reaktionszeit bei kritischen Alarmen

+
+
+ 95% +
+
+ +
+
+
+ + + + + + +
+

Präzision

+

99.97% Genauigkeit bei der Datenanalyse

+
+
+ 99% +
+
+ +
+
+
+ + + + +
+

Zuverlässigkeit

+

Ausfallsichere Redundanz-Systeme

+
+
+ 100% +
+
+
+
+
+ + +
+
+

Kommandozentrale

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

Bedrohungsstufe

+
NIEDRIG
+
+
+

Aktive Fälle

+
0
+
+
+

Ø Reaktionszeit

+
0.0s
+
+
+

Einsatzkarte

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

Bereit für die Zukunft der Strafverfolgung?

+

Erleben Sie IntelSight in Aktion

+
+ + +
+
+
+
+ + + + +
+
ISO 27001
+
+
+
+ + + + +
+
BSI
+
+
+
+ + + + +
+
DSGVO
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..1f53798 --- /dev/null +++ b/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/script.js b/script.js new file mode 100644 index 0000000..21cc018 --- /dev/null +++ b/script.js @@ -0,0 +1,689 @@ +// Particle Canvas Animation +const canvas = document.getElementById('particleCanvas'); +const ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +const particles = []; +const particleCount = 100; + +class Particle { + constructor() { + this.x = Math.random() * canvas.width; + this.y = Math.random() * canvas.height; + this.size = Math.random() * 3 + 1; + this.speedX = Math.random() * 3 - 1.5; + this.speedY = Math.random() * 3 - 1.5; + this.opacity = Math.random() * 0.5 + 0.2; + } + + update() { + this.x += this.speedX; + this.y += this.speedY; + + if (this.x > canvas.width) this.x = 0; + else if (this.x < 0) this.x = canvas.width; + + if (this.y > canvas.height) this.y = 0; + else if (this.y < 0) this.y = canvas.height; + } + + draw() { + ctx.fillStyle = `rgba(0, 212, 255, ${this.opacity})`; + ctx.beginPath(); + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.fill(); + } +} + +function init() { + for (let i = 0; i < particleCount; i++) { + particles.push(new Particle()); + } +} + +function animate() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + for (let i = 0; i < particles.length; i++) { + particles[i].update(); + particles[i].draw(); + } + + connectParticles(); + requestAnimationFrame(animate); +} + +function connectParticles() { + for (let a = 0; a < particles.length; a++) { + for (let b = a; b < particles.length; b++) { + const distance = Math.sqrt( + Math.pow(particles[a].x - particles[b].x, 2) + + Math.pow(particles[a].y - particles[b].y, 2) + ); + + if (distance < 100) { + ctx.strokeStyle = `rgba(0, 212, 255, ${0.2 * (1 - distance / 100)})`; + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(particles[a].x, particles[a].y); + ctx.lineTo(particles[b].x, particles[b].y); + ctx.stroke(); + } + } + } +} + +init(); +animate(); + +// Resize canvas +window.addEventListener('resize', () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; +}); + +// Navbar scroll effect - DEAKTIVIERT +// const navbar = document.querySelector('.navbar'); +// window.addEventListener('scroll', () => { +// if (window.scrollY > 50) { +// navbar.classList.add('scrolled'); +// } else { +// navbar.classList.remove('scrolled'); +// } +// }); + +// Smooth scrolling +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// Interactive Icon Animation +const icon = document.getElementById('interactiveIcon'); +if (icon) { + let mouseX = 0; + let mouseY = 0; + + document.addEventListener('mousemove', (e) => { + const rect = icon.getBoundingClientRect(); + const centerX = rect.left + rect.width / 2; + const centerY = rect.top + rect.height / 2; + + mouseX = (e.clientX - centerX) / 20; + mouseY = (e.clientY - centerY) / 20; + + icon.style.transform = `perspective(1000px) rotateY(${mouseX}deg) rotateX(${-mouseY}deg)`; + }); +} + +// Trust Indicators Counter Animation +const counters = document.querySelectorAll('.indicator-value'); +const speed = 200; + +const animateCounter = (counter) => { + const target = +counter.getAttribute('data-target'); + const increment = target / speed; + + const updateCounter = () => { + const current = +counter.innerText.replace('%', '').replace('+', '').replace('/7', ''); + + if (current < target) { + counter.innerText = Math.ceil(current + increment); + setTimeout(updateCounter, 10); + } else { + if (counter.getAttribute('data-target') === '99.9') { + counter.innerText = target + '%'; + } else if (counter.getAttribute('data-target') === '500') { + counter.innerText = target + '+'; + } else if (counter.getAttribute('data-target') === '24') { + counter.innerText = target + '/7'; + } + } + }; + + updateCounter(); +}; + +// Intersection Observer for animations +const observerOptions = { + threshold: 0.3, + rootMargin: '0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Animate counters + if (entry.target.classList.contains('trust-indicators')) { + counters.forEach(counter => animateCounter(counter)); + observer.unobserve(entry.target); + } + + // Animate timeline items with new effect + if (entry.target.classList.contains('timeline')) { + const items = entry.target.querySelectorAll('.timeline-item'); + items.forEach((item, index) => { + setTimeout(() => { + item.classList.add('visible'); + }, index * 300); + }); + observer.unobserve(entry.target); + } + + // Animate feature nodes + if (entry.target.classList.contains('feature-nodes')) { + const nodes = entry.target.querySelectorAll('.node'); + nodes.forEach((node, index) => { + setTimeout(() => { + node.style.opacity = '1'; + node.style.transform = 'translateY(0)'; + }, index * 150); + }); + observer.unobserve(entry.target); + } + } + }); +}, observerOptions); + +// Observe elements +document.querySelector('.trust-indicators').style.opacity = '0'; +observer.observe(document.querySelector('.trust-indicators')); +observer.observe(document.querySelector('.timeline')); + +// Set initial states for feature nodes +document.querySelectorAll('.node').forEach(node => { + node.style.opacity = '0'; + node.style.transform = 'translateY(30px)'; + node.style.transition = 'all 0.6s ease'; +}); +observer.observe(document.querySelector('.feature-nodes')); + +// Language Toggle +const langToggle = document.querySelector('.lang-toggle'); +const translations = { + de: { + features: 'Funktionen', + security: 'Sicherheit', + about: 'Über uns', + contact: 'Kontakt', + requestDemo: 'Demo anfordern', + heroTitle: 'SICHERHEIT MADE IN GERMANY', + heroText: 'Fortschrittliche Software für moderne Strafverfolgung', + discoverMore: 'Entdecken Sie mehr', + liveDemo: 'Live-Demo', + availability: 'Verfügbarkeit', + trustedBy: 'Behörden vertrauen uns', + support: 'Support', + digitalBeat: 'Der Digitale Takt', + dayWithIntelSight: 'Ein Tag mit IntelSight', + shiftStart: 'Schichtbeginn', + shiftStartDesc: 'Automatische Zusammenfassung der Nacht-Ereignisse', + realTimeAnalysis: 'Echtzeit-Analyse', + realTimeAnalysisDesc: 'KI-gestützte Mustererkennung in laufenden Fällen', + preventiveSecurity: 'Präventive Sicherheit', + preventiveSecurityDesc: 'Vorhersage-Algorithmen identifizieren Risikobereiche', + dailyReport: 'Tagesbericht', + dailyReportDesc: 'Automatisierte Dokumentation und Übergabe', + intelligenceViz: 'Intelligenz visualisiert', + encryption: 'Ende-zu-Ende Verschlüsselung', + encryptionDesc: 'Militärgrade Sicherheit für sensible Daten', + aiAnalysis: 'KI-Analyse', + aiAnalysisDesc: 'Mustererkennung in Echtzeit', + integration: 'Nahtlose Integration', + integrationDesc: 'Verbindung zu bestehenden Systemen', + compliance: '100% DSGVO-konform', + complianceDesc: 'Entwickelt nach deutschem Datenschutzrecht', + germanEngineering: 'Deutsche Ingenieurskunst', + speed: 'Geschwindigkeit', + speedDesc: 'Millisekunden-Reaktionszeit bei kritischen Alarmen', + precision: 'Präzision', + precisionDesc: '99.97% Genauigkeit bei der Datenanalyse', + reliability: 'Zuverlässigkeit', + reliabilityDesc: 'Ausfallsichere Redundanz-Systeme', + commandCenter: 'Kommandozentrale', + overview: 'Übersicht', + analysis: 'Analyse', + reports: 'Berichte', + threatLevel: 'Bedrohungsstufe', + low: 'NIEDRIG', + activeCases: 'Aktive Fälle', + responseTime: 'Ø Reaktionszeit', + deploymentMap: 'Einsatzkarte', + ctaTitle: 'Bereit für die Zukunft der Strafverfolgung?', + ctaSubtitle: 'Erleben Sie IntelSight in Aktion', + scheduleDemo: 'Demo vereinbaren', + getInTouch: 'Kontakt aufnehmen', + legal: 'Rechtliches', + imprint: 'Impressum', + privacy: 'Datenschutz', + terms: 'AGB', + contact: 'Kontakt', + allRights: 'Alle Rechte vorbehalten.' + }, + en: { + features: 'Features', + security: 'Security', + about: 'About', + contact: 'Contact', + requestDemo: 'Request Demo', + heroTitle: 'SECURITY MADE IN GERMANY', + heroText: 'Advanced Software for Modern Law Enforcement', + discoverMore: 'Discover More', + liveDemo: 'Live Demo', + availability: 'Availability', + trustedBy: 'Authorities trust us', + support: 'Support', + digitalBeat: 'The Digital Beat', + dayWithIntelSight: 'A Day with IntelSight', + shiftStart: 'Shift Start', + shiftStartDesc: 'Automatic summary of night events', + realTimeAnalysis: 'Real-time Analysis', + realTimeAnalysisDesc: 'AI-powered pattern recognition in ongoing cases', + preventiveSecurity: 'Preventive Security', + preventiveSecurityDesc: 'Predictive algorithms identify risk areas', + dailyReport: 'Daily Report', + dailyReportDesc: 'Automated documentation and handover', + intelligenceViz: 'Intelligence Visualized', + encryption: 'End-to-End Encryption', + encryptionDesc: 'Military-grade security for sensitive data', + aiAnalysis: 'AI Analysis', + aiAnalysisDesc: 'Real-time pattern recognition', + integration: 'Seamless Integration', + integrationDesc: 'Connection to existing systems', + compliance: '100% GDPR Compliant', + complianceDesc: 'Developed according to German data protection law', + germanEngineering: 'German Engineering', + speed: 'Speed', + speedDesc: 'Millisecond response time for critical alerts', + precision: 'Precision', + precisionDesc: '99.97% accuracy in data analysis', + reliability: 'Reliability', + reliabilityDesc: 'Fail-safe redundancy systems', + commandCenter: 'Command Center', + overview: 'Overview', + analysis: 'Analysis', + reports: 'Reports', + threatLevel: 'Threat Level', + low: 'LOW', + activeCases: 'Active Cases', + responseTime: 'Avg Response Time', + deploymentMap: 'Deployment Map', + ctaTitle: 'Ready for the Future of Law Enforcement?', + ctaSubtitle: 'Experience IntelSight in Action', + scheduleDemo: 'Schedule Demo', + getInTouch: 'Get in Touch', + legal: 'Legal', + imprint: 'Imprint', + privacy: 'Privacy', + terms: 'Terms', + contact: 'Contact', + allRights: 'All rights reserved.' + } +}; + +let currentLang = 'de'; + +langToggle.addEventListener('click', () => { + currentLang = currentLang === 'de' ? 'en' : 'de'; + langToggle.textContent = currentLang === 'de' ? 'DE | EN' : 'EN | DE'; + langToggle.setAttribute('data-lang', currentLang); + updateLanguage(); +}); + +function updateLanguage() { + const t = translations[currentLang]; + + // Navigation + document.querySelector('.nav-menu li:nth-child(1) a').textContent = t.features; + document.querySelector('.nav-menu li:nth-child(2) a').textContent = t.security; + document.querySelector('.nav-menu li:nth-child(3) a').textContent = t.about; + document.querySelector('.nav-menu li:nth-child(4) a').textContent = t.contact; + document.querySelector('.cta-button').textContent = t.requestDemo; + + // Hero + document.querySelector('.main-title').textContent = t.heroTitle; + document.querySelector('.hero-text').textContent = t.heroText; + document.querySelector('.primary-button').textContent = t.discoverMore; + document.querySelector('.secondary-button').textContent = t.liveDemo; + + // Trust Indicators + document.querySelectorAll('.indicator-label')[0].textContent = t.availability; + document.querySelectorAll('.indicator-label')[1].textContent = t.trustedBy; + document.querySelectorAll('.indicator-label')[2].textContent = t.support; + + // Update all other sections similarly... +} + +// Interactive Node Effects +document.querySelectorAll('.node').forEach(node => { + node.addEventListener('mouseenter', function() { + const icon = this.querySelector('.node-icon'); + icon.style.transform = 'scale(1.2) rotate(5deg)'; + }); + + node.addEventListener('mouseleave', function() { + const icon = this.querySelector('.node-icon'); + icon.style.transform = 'scale(1) rotate(0deg)'; + }); +}); + +// Dashboard Widget Animations +document.querySelectorAll('.widget').forEach(widget => { + widget.addEventListener('mouseenter', function() { + this.style.boxShadow = '0 5px 20px rgba(0, 212, 255, 0.3)'; + }); + + widget.addEventListener('mouseleave', function() { + this.style.boxShadow = 'none'; + }); +}); + +// Tab Switching +const tabs = document.querySelectorAll('.tab'); +tabs.forEach(tab => { + tab.addEventListener('click', function() { + tabs.forEach(t => t.classList.remove('active')); + this.classList.add('active'); + }); +}); + +// Form handling for demo requests +document.querySelectorAll('.primary-button, .secondary-button, .cta-button').forEach(button => { + if (button.textContent.includes('Demo') || button.textContent.includes('demo')) { + button.addEventListener('click', (e) => { + e.preventDefault(); + alert('Demo-Anfrage-Funktion würde hier implementiert werden'); + }); + } +}); + +// Glitch effect on hover for main title +const mainTitle = document.querySelector('.main-title'); +let glitchInterval; + +mainTitle.addEventListener('mouseenter', () => { + let count = 0; + glitchInterval = setInterval(() => { + mainTitle.style.textShadow = ` + ${Math.random() * 5}px ${Math.random() * 5}px 0 rgba(0, 212, 255, 0.5), + ${Math.random() * -5}px ${Math.random() * 5}px 0 rgba(255, 0, 128, 0.5) + `; + count++; + if (count > 5) { + clearInterval(glitchInterval); + mainTitle.style.textShadow = 'none'; + } + }, 50); +}); + +// Mouse parallax effect for hero content - DEAKTIVIERT +// const heroContent = document.querySelector('.hero-content'); +// document.addEventListener('mousemove', (e) => { +// const x = (window.innerWidth / 2 - e.clientX) / 50; +// const y = (window.innerHeight / 2 - e.clientY) / 50; +// +// heroContent.style.transform = `translateX(${x}px) translateY(${y}px)`; +// }); + +// Neural Network Visualization +function initNeuralNetwork() { + const canvas = document.getElementById('neuralCanvas'); + if (!canvas) return; + + const section = document.querySelector('.intelligence-viz'); + if (!section) return; + + const ctx = canvas.getContext('2d'); + canvas.width = window.innerWidth; + canvas.height = section.offsetHeight; + + const nodes = []; + const connections = []; + const nodeCount = 20; + + // Create nodes + for (let i = 0; i < nodeCount; i++) { + nodes.push({ + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + vx: (Math.random() - 0.5) * 0.5, + vy: (Math.random() - 0.5) * 0.5, + radius: Math.random() * 3 + 2, + pulsePhase: Math.random() * Math.PI * 2 + }); + } + + // Create connections + for (let i = 0; i < nodeCount; i++) { + for (let j = i + 1; j < nodeCount; j++) { + if (Math.random() < 0.15) { + connections.push({ from: i, to: j, strength: Math.random() }); + } + } + } + + function animate() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.02)'; // Weniger opak für subtileren Effekt + ctx.fillRect(0, 0, canvas.width, canvas.height); + + // Update and draw connections + connections.forEach(conn => { + const from = nodes[conn.from]; + const to = nodes[conn.to]; + const distance = Math.sqrt((to.x - from.x) ** 2 + (to.y - from.y) ** 2); + + if (distance < 300) { + ctx.beginPath(); + ctx.moveTo(from.x, from.y); + ctx.lineTo(to.x, to.y); + ctx.strokeStyle = `rgba(0, 212, 255, ${(1 - distance / 300) * 0.15 * conn.strength})`; // Schwächere Linien + ctx.lineWidth = conn.strength * 1.5; + ctx.stroke(); + + // Data flow animation + const flowProgress = (Date.now() / 1000) % 1; + const flowX = from.x + (to.x - from.x) * flowProgress; + const flowY = from.y + (to.y - from.y) * flowProgress; + + ctx.beginPath(); + ctx.arc(flowX, flowY, 2, 0, Math.PI * 2); + ctx.fillStyle = 'rgba(0, 212, 255, 0.8)'; + ctx.fill(); + } + }); + + // Update and draw nodes + nodes.forEach((node, i) => { + // Update position + node.x += node.vx; + node.y += node.vy; + + // Bounce off walls + if (node.x < 0 || node.x > canvas.width) node.vx *= -1; + if (node.y < 0 || node.y > canvas.height) node.vy *= -1; + + // Keep in bounds + node.x = Math.max(0, Math.min(canvas.width, node.x)); + node.y = Math.max(0, Math.min(canvas.height, node.y)); + + // Draw node with pulse effect + const pulseSize = Math.sin(Date.now() / 500 + node.pulsePhase) * 0.3 + 1; + + ctx.beginPath(); + ctx.arc(node.x, node.y, node.radius * pulseSize, 0, Math.PI * 2); + ctx.fillStyle = 'rgba(0, 212, 255, 0.4)'; // Weniger intensive Nodes + ctx.fill(); + + // Glow effect + const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, node.radius * pulseSize * 4); + gradient.addColorStop(0, 'rgba(0, 212, 255, 0.15)'); + gradient.addColorStop(1, 'rgba(0, 212, 255, 0)'); + ctx.fillStyle = gradient; + ctx.beginPath(); + ctx.arc(node.x, node.y, node.radius * pulseSize * 4, 0, Math.PI * 2); + ctx.fill(); + }); + + requestAnimationFrame(animate); + } + + animate(); +} + +// Data Particles +function initDataParticles() { + const container = document.getElementById('dataParticles'); + if (!container) return; + + for (let i = 0; i < 30; i++) { + const particle = document.createElement('div'); + particle.className = 'data-particle'; + particle.style.left = Math.random() * 100 + '%'; + particle.style.top = Math.random() * 100 + '%'; + particle.style.animationDelay = Math.random() * 20 + 's'; + particle.style.animationDuration = (20 + Math.random() * 10) + 's'; + container.appendChild(particle); + } +} + +// Live Dashboard Functions +function initLiveDashboard() { + // Animated Counter + const counter = document.getElementById('liveCounter'); + if (counter) { + let currentValue = 0; + const targetValue = 247; + const increment = targetValue / 100; + + const updateCounter = () => { + currentValue += increment; + if (currentValue < targetValue) { + counter.textContent = Math.floor(currentValue); + requestAnimationFrame(updateCounter); + } else { + counter.textContent = targetValue; + // Continue with live updates + setInterval(() => { + const variation = Math.floor(Math.random() * 10) - 5; + counter.textContent = Math.max(0, parseInt(counter.textContent) + variation); + }, 3000); + } + }; + updateCounter(); + } + + // Response Timer + const timer = document.getElementById('responseTimer'); + if (timer) { + setInterval(() => { + const time = (Math.random() * 2 + 2).toFixed(1); + timer.textContent = time + 's'; + timer.style.color = time < 3 ? '#4CAF50' : time < 4 ? '#FFC107' : '#FF4444'; + }, 2000); + } + + // Map Points + const mapPoints = document.getElementById('mapPoints'); + if (mapPoints) { + // Create initial points + for (let i = 0; i < 5; i++) { + const point = document.createElement('div'); + point.className = 'map-point'; + point.style.left = Math.random() * 80 + 10 + '%'; + point.style.top = Math.random() * 80 + 10 + '%'; + point.style.animationDelay = Math.random() * 2 + 's'; + mapPoints.appendChild(point); + } + + // Add new points periodically + setInterval(() => { + if (mapPoints.children.length < 10) { + const point = document.createElement('div'); + point.className = 'map-point'; + point.style.left = Math.random() * 80 + 10 + '%'; + point.style.top = Math.random() * 80 + 10 + '%'; + point.style.animation = 'pointPulse 2s ease-in-out infinite, fadeIn 0.5s ease-out'; + mapPoints.appendChild(point); + + setTimeout(() => { + point.style.animation = 'pointPulse 2s ease-in-out infinite'; + }, 500); + } + }, 5000); + } +} + +// Parallax Scrolling +function initParallax() { + const sections = document.querySelectorAll('section'); + const transitions = document.querySelectorAll('.section-transition'); + + window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + + // Parallax for sections + sections.forEach((section, index) => { + const rate = scrolled * -0.5; + const yPos = -(scrolled * 0.01 * index); + + if (section.classList.contains('digital-beat') || + section.classList.contains('intelligence-viz') || + section.classList.contains('german-engineering') || + section.classList.contains('command-center')) { + section.style.transform = `translateY(${yPos}px)`; + } + }); + + // Parallax for transitions + transitions.forEach((transition, index) => { + const rect = transition.getBoundingClientRect(); + const speed = 0.5; + + if (rect.bottom >= 0 && rect.top <= window.innerHeight) { + const yPos = -(scrolled * speed * 0.1); + transition.style.transform = `translateY(${yPos}px)`; + } + }); + + // Parallax for specific elements + // Hero content bleibt statisch (keine Parallax) + // const heroContent = document.querySelector('.hero-content'); + // if (heroContent) { + // heroContent.style.transform = `translateY(${scrolled * 0.3}px)`; + // } + + // Hero video bleibt statisch + // const heroVideo = document.querySelector('.hero-video'); + // if (heroVideo) { + // heroVideo.style.transform = `translate(-50%, ${-50 + scrolled * 0.1}%)`; + // } + }); +} + +// Initialize everything +window.addEventListener('load', () => { + // Add loaded class for animations + document.body.classList.add('loaded'); + + // Start animations + setTimeout(() => { + document.querySelector('.hero-content').style.opacity = '1'; + document.querySelector('.hero-content').style.transform = 'translateY(0)'; + }, 100); + + // Initialize neural network + initNeuralNetwork(); + initDataParticles(); + initLiveDashboard(); + initParallax(); +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b43c0e6 --- /dev/null +++ b/styles.css @@ -0,0 +1,2213 @@ +/* Global Styles */ +:root { + --primary-blue: #232D53; + --dark-blue: #1A1F3A; + --accent-blue: #00D4FF; + --light-gray: #F5F5F5; + --white: #FFFFFF; + --alert-red: #FF4444; + --success-green: #4CAF50; + --warning-yellow: #FFC107; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + background-color: #000; /* Schwarz statt Blau */ + color: var(--white); + overflow-x: hidden; + line-height: 1.6; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Typography */ +h1, h2, h3, h4 { + font-family: 'Bebas Neue', cursive; + letter-spacing: 1px; +} + +.section-title { + font-size: 3.5rem; + text-align: center; + margin-bottom: 1rem; + position: relative; + display: inline-block; + width: 100%; +} + +.section-subtitle { + font-size: 1.2rem; + text-align: center; + opacity: 0.8; + margin-bottom: 3rem; + font-weight: 300; +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + transition: all 0.3s ease; + background: transparent; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 2rem; +} + +.logo-img { + height: 55px; + width: auto; + filter: brightness(0) invert(1); +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-menu a { + color: var(--white); + text-decoration: none; + font-weight: 600; + font-size: 1.1rem; + transition: all 0.3s ease; + position: relative; +} + +.nav-menu a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--accent-blue); + transition: width 0.3s ease; +} + +.nav-menu a:hover::after { + width: 100%; +} + +.nav-extras { + display: flex; + align-items: center; + gap: 1rem; +} + +.lang-toggle { + background: transparent; + border: 1px solid var(--white); + color: var(--white); + padding: 0.5rem 1rem; + border-radius: 20px; + cursor: pointer; + transition: all 0.3s ease; +} + +.lang-toggle:hover { + background: var(--white); + color: var(--primary-blue); +} + +.cta-button, .primary-button, .secondary-button { + padding: 0.75rem 1.5rem; + border: none; + border-radius: 25px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; +} + +.cta-button, .primary-button { + background: var(--accent-blue); + color: var(--dark-blue); +} + +.cta-button:hover, .primary-button:hover { + background: var(--white); + transform: translateY(-2px); + box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4); +} + +.secondary-button { + background: transparent; + color: var(--white); + border: 2px solid var(--white); +} + +.secondary-button:hover { + background: var(--white); + color: var(--primary-blue); +} + +.large { + padding: 1rem 2rem; + font-size: 1.1rem; +} + +/* Hero Section */ +.hero { + min-height: 120vh; /* Verlängert von 100vh auf 120vh */ + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + padding-top: 80px; + padding-bottom: 200px; /* Mehr Platz unten */ +} + +/* Wellenförmiger Übergang am Ende der Hero Section */ +.hero::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + right: 0; + height: 150px; + background: #0a0a0a; + clip-path: polygon( + 0 100%, + 0 40%, + 5% 35%, 10% 40%, 15% 35%, 20% 40%, 25% 35%, 30% 40%, 35% 35%, 40% 40%, 45% 35%, 50% 40%, + 55% 35%, 60% 40%, 65% 35%, 70% 40%, 75% 35%, 80% 40%, 85% 35%, 90% 40%, 95% 35%, + 100% 40%, + 100% 100% + ); +} + +/* Video Background */ +.hero-video { + position: absolute; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + transform: translate(-50%, -50%); + z-index: 0; + object-fit: cover; +} + +/* Video Overlay to match brand colors */ +.video-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, + rgba(35, 45, 83, 0.85) 0%, + rgba(26, 31, 58, 0.85) 50%, + rgba(35, 45, 83, 0.85) 100%); + mix-blend-mode: multiply; + z-index: 1; +} + +#particleCanvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; +} + +.hero-content { + text-align: center; + z-index: 3; + position: relative; +} + +.hero-title { + margin-bottom: 2rem; +} + +.subtitle { + display: block; + font-size: 1.5rem; + margin-bottom: 0.5rem; + opacity: 0.8; + font-weight: 300; + letter-spacing: 3px; +} + +.main-title { + display: block; + font-size: 4.5rem; + letter-spacing: 4px; + background: linear-gradient(135deg, var(--white), var(--accent-blue)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-text { + font-size: 1.3rem; + margin-bottom: 4rem; + opacity: 0.9; +} + + +.hero-cta { + display: flex; + gap: 1rem; + justify-content: center; + margin-top: 2rem; +} + +.trust-indicators { + position: absolute; + bottom: 50px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 4rem; + z-index: 3; +} + +.indicator { + text-align: center; +} + +.indicator-value { + font-size: 2.5rem; + font-weight: 700; + display: block; + color: var(--accent-blue); +} + +.indicator-label { + font-size: 0.9rem; + opacity: 0.8; +} + +/* Digital Beat Section - Temporal Flow */ +.digital-beat { + padding: 80px 0 60px 0; + background: #0a0a0a; + position: relative; + overflow: hidden; + margin-top: -80px; /* Überlappung mit Hero Section */ + z-index: 5; +} + +.digital-beat::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 212, 255, 0.03) 2px, + rgba(0, 212, 255, 0.03) 4px + ), + repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + rgba(0, 212, 255, 0.03) 2px, + rgba(0, 212, 255, 0.03) 4px + ); + pointer-events: none; +} + +.timeline { + position: relative; + padding: 50px 0; + perspective: 1000px; +} + +/* Liquid Timeline */ +.timeline::before { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 4px; + transform: translateX(-50%); + background: transparent; + filter: blur(1px); +} + +.liquid-timeline { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 4px; + transform: translateX(-50%); + overflow: hidden; +} + +.liquid-timeline::before { + content: ''; + position: absolute; + top: -100%; + left: 0; + right: 0; + height: 200%; + background: linear-gradient( + 180deg, + transparent 0%, + var(--accent-blue) 20%, + transparent 40%, + var(--accent-blue) 60%, + transparent 80%, + var(--accent-blue) 100% + ); + animation: liquidFlow 8s linear infinite; +} + +@keyframes liquidFlow { + to { transform: translateY(50%); } +} + +.timeline-item { + display: flex; + align-items: center; + margin-bottom: 80px; + position: relative; + opacity: 0; + transform: translateY(50px) rotateX(-10deg); + transform-style: preserve-3d; + transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +.timeline-item.visible { + opacity: 1; + transform: translateY(0) rotateX(0); +} + +.timeline-item:nth-child(even) { + flex-direction: row-reverse; +} + +/* Glitch time display */ +.timeline-item::before { + content: attr(data-time); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -40px; + font-size: 2rem; + font-weight: 700; + font-family: 'Bebas Neue', monospace; + color: var(--accent-blue); + text-shadow: + 2px 2px 0 rgba(255, 0, 128, 0.5), + -2px -2px 0 rgba(0, 255, 255, 0.5); + animation: glitchText 10s infinite; + background: rgba(0, 0, 0, 0.8); + padding: 5px 15px; + border-radius: 20px; + backdrop-filter: blur(10px); +} + +/* Alternate positioning for even items */ +.timeline-item:nth-child(even)::before { + left: calc(50% + 100px); +} + +.timeline-item:nth-child(odd)::before { + left: calc(50% - 100px); +} + +@keyframes glitchText { + 0%, 90%, 100% { + text-shadow: + 2px 2px 0 rgba(255, 0, 128, 0.5), + -2px -2px 0 rgba(0, 255, 255, 0.5); + } + 92% { + text-shadow: + -2px 2px 0 rgba(255, 0, 128, 0.8), + 2px -2px 0 rgba(0, 255, 255, 0.8); + } + 94% { + text-shadow: + 2px -2px 0 rgba(255, 0, 128, 0.5), + -2px 2px 0 rgba(0, 255, 255, 0.5); + } +} + +/* Morphing Icons */ +.timeline-icon { + width: 100px; + height: 100px; + background: rgba(0, 0, 0, 0.8); + border: 2px solid var(--accent-blue); + display: flex; + align-items: center; + justify-content: center; + position: relative; + z-index: 2; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + animation: iconFloat 6s ease-in-out infinite; +} + +.timeline-item:nth-child(1) .timeline-icon { animation-delay: 0s; } +.timeline-item:nth-child(2) .timeline-icon { animation-delay: 1.5s; } +.timeline-item:nth-child(3) .timeline-icon { animation-delay: 3s; } +.timeline-item:nth-child(4) .timeline-icon { animation-delay: 4.5s; } + +@keyframes iconFloat { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-10px) rotate(180deg); } +} + +.timeline-icon::before { + content: ''; + position: absolute; + inset: -20px; + background: radial-gradient(circle, var(--accent-blue), transparent); + opacity: 0.3; + filter: blur(20px); + animation: pulse 2s ease-in-out infinite; +} + +.timeline-icon svg { + width: 50px; + height: 50px; + color: var(--accent-blue); + filter: drop-shadow(0 0 10px currentColor); + animation: iconMorph 4s ease-in-out infinite; +} + +@keyframes iconMorph { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale(1.2) rotate(90deg); } +} + +/* Holographic content */ +.timeline-content { + flex: 1; + padding: 0 80px; + position: relative; +} + +.timeline-content::before { + content: ''; + position: absolute; + top: -10px; + left: 20px; + right: 20px; + bottom: -10px; + background: linear-gradient( + 135deg, + rgba(0, 212, 255, 0.1), + rgba(255, 0, 128, 0.1) + ); + filter: blur(40px); + opacity: 0; + transition: opacity 0.6s ease; +} + +.timeline-item:hover .timeline-content::before { + opacity: 1; +} + +.timeline-item:nth-child(even) .timeline-content { + text-align: right; +} + +.timeline-content h3 { + font-size: 2.2rem; + margin-bottom: 0.5rem; + background: linear-gradient( + 45deg, + var(--white), + var(--accent-blue), + var(--white) + ); + background-size: 200% 100%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: shimmer 3s linear infinite; +} + +@keyframes shimmer { + to { background-position: -200% 0; } +} + +.timeline-content p { + opacity: 0.7; + font-size: 1.1rem; + letter-spacing: 0.5px; + position: relative; + padding: 10px 0; +} + +/* Chromatic aberration on hover */ +.timeline-item:hover .timeline-content h3 { + animation: chromaticAberration 0.3s ease-out; +} + +@keyframes chromaticAberration { + 0%, 100% { text-shadow: none; } + 50% { + text-shadow: + -3px 0 rgba(255, 0, 0, 0.5), + 3px 0 rgba(0, 255, 255, 0.5); + } +} + +/* Intelligence Visualization - Neural Network */ +.intelligence-viz { + padding: 100px 0; + background: #000; + position: relative; + overflow: hidden; + min-height: 100vh; +} + +.intelligence-viz::before { + content: ''; + position: absolute; + inset: 0; + background: + radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 50%, rgba(255, 0, 128, 0.1) 0%, transparent 50%); + filter: blur(100px); +} + +/* Dunkler Overlay für bessere Lesbarkeit */ +.intelligence-viz .container { + position: relative; + z-index: 10; +} + +.viz-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +/* 3D Neural Network Canvas */ +#neuralCanvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + pointer-events: none; +} + +/* Data Particles */ +.data-particles { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} + +.data-particle { + position: absolute; + width: 4px; + height: 4px; + background: var(--accent-blue); + border-radius: 50%; + filter: blur(1px); + animation: dataFlow 20s linear infinite; +} + +@keyframes dataFlow { + from { + transform: translate(-100px, -100px); + } + to { + transform: translate(calc(100vw + 100px), calc(100vh + 100px)); + } +} + +/* Feature Nodes - Clean Tech Style */ +.feature-nodes { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 60px; + position: relative; + z-index: 3; + padding: 0 40px; +} + +.node { + background: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 0; + padding: 40px; + cursor: pointer; + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + transform-style: preserve-3d; + perspective: 1000px; + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); +} + +/* Holographic Shimmer */ +.node::before { + content: ''; + position: absolute; + top: -200%; + left: -50%; + width: 200%; + height: 400%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(0, 212, 255, 0.1) 35%, + rgba(255, 0, 128, 0.1) 40%, + transparent 45% + ); + animation: holographicSweep 6s linear infinite; + pointer-events: none; +} + +@keyframes holographicSweep { + to { + transform: translateX(100%) translateY(100%); + } +} + +/* Glitch Effect on Hover */ +.node:hover { + transform: translateY(-10px) rotateX(-5deg); + box-shadow: + 0 20px 40px rgba(0, 212, 255, 0.3), + inset 0 0 20px rgba(0, 212, 255, 0.1); + animation: glitchNode 0.3s ease-out; +} + +@keyframes glitchNode { + 0%, 100% { transform: translateY(-10px) rotateX(-5deg); } + 25% { transform: translateY(-10px) rotateX(-5deg) translateX(-2px); } + 75% { transform: translateY(-10px) rotateX(-5deg) translateX(2px); } +} + +/* ASCII/Matrix Rain Background */ +.node::after { + content: '01001001 01101110 01110100 01100101 01101100'; + position: absolute; + top: 10px; + left: 10px; + right: 10px; + font-family: monospace; + font-size: 10px; + color: rgba(0, 212, 255, 0.1); + word-break: break-all; + line-height: 1.2; + pointer-events: none; + animation: matrixRain 20s linear infinite; +} + +@keyframes matrixRain { + to { transform: translateY(100%); } +} + +.node-icon { + width: 80px; + height: 80px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 20px currentColor); + animation: iconPulse 3s ease-in-out infinite; + display: flex; + align-items: center; + justify-content: center; +} + +.node-icon svg { + width: 100%; + height: 100%; + color: var(--accent-blue); +} + +@keyframes iconPulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +.node-info h4 { + font-size: 1.8rem; + margin-bottom: 0.8rem; + text-transform: uppercase; + letter-spacing: 2px; + background: linear-gradient( + 90deg, + var(--white), + var(--accent-blue), + var(--white) + ); + background-size: 200% 100%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: textShimmer 4s linear infinite; +} + +@keyframes textShimmer { + to { background-position: -200% 0; } +} + +.node-info p { + opacity: 0.7; + font-size: 1.1rem; + line-height: 1.6; +} + +/* Chromatic Aberration for Icons */ +.node:hover .node-icon { + animation: chromaticIcon 0.3s ease-out forwards; +} + +@keyframes chromaticIcon { + 0%, 100% { + filter: drop-shadow(0 0 20px currentColor); + } + 50% { + filter: + drop-shadow(-2px 0 0 rgba(255, 0, 0, 0.8)) + drop-shadow(2px 0 0 rgba(0, 255, 255, 0.8)) + drop-shadow(0 0 20px currentColor); + } +} + +/* German Engineering - Matrix Style */ +.german-engineering { + padding: 100px 0; + background: #000; + position: relative; + overflow: hidden; +} + +/* Digital Grid Background */ +.german-engineering::before { + content: ''; + position: absolute; + top: -50px; /* Erweitert über die Grenzen */ + left: -50px; + right: -50px; + bottom: -50px; + background-image: + linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px), + radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.05) 0%, transparent 50%), + radial-gradient(circle at 75% 75%, rgba(255, 0, 128, 0.05) 0%, transparent 50%); + background-size: 50px 50px, 50px 50px, 100% 100%, 100% 100%; + animation: gridMove 20s linear infinite; + z-index: 0; +} + +@keyframes gridMove { + to { transform: translate(50px, 50px); } +} + +.engineering-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 60px; + position: relative; + z-index: 2; +} + +.engineering-card { + background: rgba(0, 0, 0, 0.8); + border: 1px solid var(--accent-blue); + padding: 50px 40px; + text-align: center; + position: relative; + overflow: hidden; + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + clip-path: polygon( + 0 0, + calc(100% - 30px) 0, + 100% 30px, + 100% 100%, + 30px 100%, + 0 calc(100% - 30px) + ); +} + +/* Scanning Line Effect */ +.engineering-card::before { + content: ''; + position: absolute; + top: -100%; + left: 0; + right: 0; + height: 100%; + background: linear-gradient( + 0deg, + transparent 0%, + rgba(0, 212, 255, 0.1) 50%, + transparent 100% + ); + animation: scanCard 6s linear infinite; +} + +@keyframes scanCard { + to { top: 100%; } +} + +.engineering-card:hover { + transform: translateY(-10px) scale(1.02); + border-color: var(--white); + background: rgba(0, 212, 255, 0.05); + box-shadow: + 0 20px 40px rgba(0, 212, 255, 0.4), + inset 0 0 60px rgba(0, 212, 255, 0.1); +} + +/* Tech Icons Container */ +.card-icon { + position: relative; + display: inline-block; + margin-bottom: 30px; + width: 120px; + height: 120px; +} + +/* Rotating Tech Circle */ +.icon-bg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + border: 2px solid rgba(0, 212, 255, 0.3); + border-radius: 50%; + animation: rotateCircle 10s linear infinite; +} + +.icon-bg::before, +.icon-bg::after { + content: ''; + position: absolute; + inset: -10px; + border: 1px solid rgba(0, 212, 255, 0.1); + border-radius: 50%; + animation: rotateCircle 15s linear infinite reverse; +} + +.icon-bg::after { + inset: -20px; + animation-duration: 20s; +} + +@keyframes rotateCircle { + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +.card-icon svg { + position: relative; + z-index: 2; + width: 60px; + height: 60px; + color: var(--accent-blue); + filter: drop-shadow(0 0 20px currentColor); + animation: iconFloat 4s ease-in-out infinite; +} + +@keyframes iconFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.engineering-card h3 { + font-size: 2rem; + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 3px; + background: linear-gradient(45deg, var(--white), var(--accent-blue)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.engineering-card p { + margin-bottom: 30px; + opacity: 0.7; + font-size: 1.1rem; + line-height: 1.6; +} + +/* Live Progress Bars */ +.stat-bar { + width: 100%; + height: 10px; + background: rgba(0, 0, 0, 0.5); + border: 1px solid rgba(0, 212, 255, 0.2); + position: relative; + overflow: hidden; +} + +.stat-fill { + height: 100%; + background: var(--accent-blue); + position: relative; + animation: fillBar 2s ease-out forwards; +} + +/* Glowing Pulse Effect */ +.stat-fill::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8)); + animation: statPulse 2s linear infinite; +} + +@keyframes statPulse { + to { transform: translateX(-200px); } +} + +/* Percentage Display */ +.stat-value { + position: absolute; + right: -40px; + top: 50%; + transform: translateY(-50%); + font-family: 'Bebas Neue', monospace; + font-size: 1.2rem; + color: var(--accent-blue); + text-shadow: 0 0 10px currentColor; +} + +/* Command Center - Living Dashboard */ +.command-center { + padding: 100px 0; + background: #000; + position: relative; + overflow: hidden; +} + +/* Schwarzer Übergang am Ende */ +.command-center::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + right: 0; + height: 10px; + background: #000; + z-index: 100; +} + +/* Scanlines Effect */ +.command-center::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 212, 255, 0.03) 2px, + rgba(0, 212, 255, 0.03) 4px + ); + pointer-events: none; + animation: scanlines 8s linear infinite; +} + +@keyframes scanlines { + to { transform: translateY(10px); } +} + +.preview-container { + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(0, 212, 255, 0.3); + border-radius: 20px; + overflow: hidden; + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.8), + inset 0 0 100px rgba(0, 212, 255, 0.05); + position: relative; +} + +/* Holographic Effect */ +.preview-container::before { + content: ''; + position: absolute; + top: -100%; + left: -100%; + right: -100%; + bottom: -100%; + background: + linear-gradient( + 45deg, + transparent 40%, + rgba(0, 212, 255, 0.1) 50%, + transparent 60% + ); + animation: hologramSweep 4s linear infinite; +} + +@keyframes hologramSweep { + to { transform: translate(100%, 100%); } +} + +.preview-header { + background: rgba(0, 0, 0, 0.8); + padding: 20px 30px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(0, 212, 255, 0.2); + position: relative; +} + +/* Glitch Header */ +.preview-header::after { + content: 'COMMAND CENTER'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 0.8rem; + font-family: monospace; + color: rgba(0, 212, 255, 0.1); + letter-spacing: 2px; + pointer-events: none; + animation: glitchHeader 10s infinite; +} + +@keyframes glitchHeader { + 0%, 95%, 100% { opacity: 0; } + 96% { opacity: 1; transform: translate(-50%, -50%) translateX(-2px); } + 97% { opacity: 1; transform: translate(-50%, -50%) translateX(2px); } + 98% { opacity: 1; transform: translate(-50%, -50%) translateY(-2px); } +} + +.window-controls { + display: flex; + gap: 12px; + z-index: 2; +} + +.control { + width: 14px; + height: 14px; + border-radius: 50%; + position: relative; + cursor: pointer; + transition: all 0.3s ease; +} + +.control::before { + content: ''; + position: absolute; + inset: -2px; + border-radius: 50%; + opacity: 0; + transition: opacity 0.3s ease; +} + +.control:hover::before { + opacity: 1; +} + +.control.red { + background: #FF5F56; + box-shadow: 0 0 10px rgba(255, 95, 86, 0.5); +} +.control.red::before { background: rgba(255, 95, 86, 0.3); } + +.control.yellow { + background: #FFBD2E; + box-shadow: 0 0 10px rgba(255, 189, 46, 0.5); +} +.control.yellow::before { background: rgba(255, 189, 46, 0.3); } + +.control.green { + background: #27C93F; + box-shadow: 0 0 10px rgba(39, 201, 63, 0.5); +} +.control.green::before { background: rgba(39, 201, 63, 0.3); } + +.preview-tabs { + display: flex; + gap: 30px; + z-index: 2; +} + +.tab { + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.6); + padding: 10px 20px; + cursor: pointer; + transition: all 0.3s ease; + border-radius: 10px; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.9rem; + position: relative; +} + +.tab::before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: var(--accent-blue); + transform: scaleX(0); + transition: transform 0.3s ease; +} + +.tab.active, .tab:hover { + color: var(--white); + background: rgba(0, 212, 255, 0.1); +} + +.tab.active::before { + transform: scaleX(1); +} + +.preview-content { + padding: 50px; + position: relative; +} + +.dashboard-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; +} + +/* Living Widgets */ +.widget { + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(10px); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 15px; + padding: 30px; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +/* Data Stream Background */ +.widget::before { + content: attr(data-value); + position: absolute; + font-size: 100px; + font-weight: 700; + top: -20px; + right: -20px; + color: rgba(0, 212, 255, 0.03); + font-family: 'Bebas Neue', monospace; + pointer-events: none; +} + +.widget:hover { + transform: translateY(-5px) scale(1.02); + border-color: var(--accent-blue); + box-shadow: + 0 10px 40px rgba(0, 212, 255, 0.3), + inset 0 0 30px rgba(0, 212, 255, 0.1); +} + +.widget h4 { + font-size: 0.9rem; + margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: 2px; + color: rgba(255, 255, 255, 0.5); + font-weight: 600; +} + +/* Animated Threat Level */ +.threat-indicator { + padding: 15px 25px; + border-radius: 10px; + text-align: center; + font-weight: 700; + letter-spacing: 2px; + position: relative; + overflow: hidden; + text-transform: uppercase; +} + +.threat-indicator::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + animation: threatSweep 3s infinite; +} + +@keyframes threatSweep { + to { left: 100%; } +} + +.threat-indicator.low { + background: linear-gradient(135deg, #1a5f1a, #2d7a2d); + color: #4CAF50; + text-shadow: 0 0 20px currentColor; + box-shadow: + inset 0 0 20px rgba(76, 175, 80, 0.3), + 0 0 30px rgba(76, 175, 80, 0.2); +} + +/* Live Counting Numbers */ +.case-count, .time-display { + font-size: 3rem; + font-weight: 700; + font-family: 'Bebas Neue', monospace; + background: linear-gradient(45deg, var(--accent-blue), var(--white)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-shadow: 0 0 30px rgba(0, 212, 255, 0.5); + display: inline-block; + min-width: 100px; +} + +/* 3D Terrain Map */ +.map-view { + position: relative; +} + +.map-placeholder { + height: 200px; + background: #000; + border-radius: 10px; + position: relative; + overflow: hidden; +} + +/* Topographic Grid */ +.map-placeholder::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px); + background-size: 20px 20px; + transform: perspective(500px) rotateX(60deg); + transform-origin: center bottom; +} + +/* Radar Sweep */ +.map-placeholder::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 200%; + height: 200%; + background: conic-gradient( + from 0deg, + transparent 0deg, + rgba(0, 212, 255, 0.3) 30deg, + transparent 60deg + ); + transform: translate(-50%, -50%); + animation: radarSweep 4s linear infinite; +} + +@keyframes radarSweep { + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +/* Active Points */ +.map-points { + position: absolute; + inset: 0; +} + +.map-point { + position: absolute; + width: 8px; + height: 8px; + background: var(--accent-blue); + border-radius: 50%; + box-shadow: 0 0 20px currentColor; + animation: pointPulse 2s ease-in-out infinite; +} + +@keyframes pointPulse { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.5); + opacity: 0.6; + } +} + +/* Final CTA - Futuristic Design */ +.final-cta { + padding: 150px 0; + background: #000; + text-align: center; + position: relative; + overflow: hidden; + margin-top: -10px; /* Starke Überlappung */ + z-index: 10; /* Definitiv über Command Center */ + box-shadow: 0 -10px 20px rgba(0, 0, 0, 1); /* Schatten nach oben */ +} + +/* Matrix Rain Background */ +.final-cta::before { + content: '10110101 00101011 11010010 01001101 10110101 00101011 11010010 01001101'; + position: absolute; + top: -100%; + left: 0; + right: 0; + height: 200%; + font-family: monospace; + font-size: 20px; + color: rgba(0, 212, 255, 0.05); + word-break: break-all; + line-height: 1.2; + animation: matrixFall 20s linear infinite; + pointer-events: none; +} + +@keyframes matrixFall { + to { transform: translateY(50%); } +} + +/* Holographic Grid */ +.final-cta::after { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); + background-size: 100px 100px; + animation: gridShift 10s linear infinite; +} + +@keyframes gridShift { + to { transform: translate(100px, 100px); } +} + +.cta-content { + position: relative; + z-index: 2; +} + +.cta-title { + font-size: 4rem; + margin-bottom: 1.5rem; + text-transform: uppercase; + letter-spacing: 4px; + position: relative; + display: inline-block; +} + +/* Glitch Title Effect */ +.cta-title::before, +.cta-title::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.cta-title::before { + animation: glitchCTA1 0.5s infinite; + color: rgba(0, 212, 255, 0.8); + z-index: -1; +} + +.cta-title::after { + animation: glitchCTA2 0.5s infinite; + color: rgba(255, 0, 128, 0.8); + z-index: -2; +} + +@keyframes glitchCTA1 { + 0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); } + 20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); } + 40% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -2px); } + 60% { clip-path: inset(80% 0 0 0); transform: translate(-1px, 1px); } +} + +@keyframes glitchCTA2 { + 0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); } + 30% { clip-path: inset(10% 0 80% 0); transform: translate(2px, -1px); } + 50% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); } + 70% { clip-path: inset(70% 0 10% 0); transform: translate(1px, -2px); } +} + +.cta-subtitle { + font-size: 1.5rem; + margin-bottom: 4rem; + opacity: 0.7; + letter-spacing: 2px; + animation: fadeInOut 4s ease-in-out infinite; +} + +@keyframes fadeInOut { + 0%, 100% { opacity: 0.7; } + 50% { opacity: 1; } +} + +/* Futuristic CTA Buttons */ +.cta-buttons { + display: flex; + gap: 40px; + justify-content: center; + margin-bottom: 80px; +} + +.cta-buttons .primary-button, +.cta-buttons .secondary-button { + position: relative; + padding: 20px 40px; + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 2px; + overflow: hidden; + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); +} + +.cta-buttons .primary-button::before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(45deg, var(--accent-blue), transparent, var(--accent-blue)); + animation: rotateGradient 3s linear infinite; + z-index: -1; +} + +@keyframes rotateGradient { + to { transform: rotate(360deg); } +} + +.cta-buttons .secondary-button { + background: transparent; + border: 2px solid var(--accent-blue); + position: relative; +} + +.cta-buttons .secondary-button::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent); + animation: buttonSweep 3s infinite; +} + +@keyframes buttonSweep { + to { left: 100%; } +} + +/* Certification Cards */ +.certifications { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + max-width: 600px; + margin: 0 auto; +} + +.cert-card { + background: rgba(0, 0, 0, 0.6); + border: 1px solid rgba(0, 212, 255, 0.2); + padding: 30px; + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + + +.cert-card:hover { + transform: translateY(-5px); + border-color: var(--accent-blue); + box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3); +} + +.cert-icon { + width: 60px; + height: 60px; + margin: 0 auto 15px; + display: flex; + align-items: center; + justify-content: center; +} + +.cert-icon svg { + width: 100%; + height: 100%; + color: var(--accent-blue); + filter: drop-shadow(0 0 10px currentColor); +} + +.cert-name { + font-family: 'Bebas Neue', monospace; + font-size: 1.2rem; + letter-spacing: 2px; + color: rgba(255, 255, 255, 0.8); +} + +/* Footer */ +.footer { + background: #000; + padding: 80px 0 30px; + position: relative; + overflow: hidden; +} + +/* Animated Grid Background */ +.footer::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: + linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px); + background-size: 50px 50px; + animation: gridSlide 20s linear infinite; + pointer-events: none; +} + +/* Top Border Animation */ +.footer::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient( + 90deg, + transparent, + var(--accent-blue) 20%, + var(--accent-blue) 80%, + transparent + ); + animation: borderGlow 3s ease-in-out infinite; +} + +@keyframes borderGlow { + 0%, 100% { opacity: 0.5; transform: scaleX(0.5); } + 50% { opacity: 1; transform: scaleX(1); } +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 60px; + margin-bottom: 60px; + position: relative; + z-index: 2; +} + +/* Logo Section Enhancement */ +.footer-section:first-child { + position: relative; +} + +.footer-section:first-child::before { + content: ''; + position: absolute; + top: -20px; + left: -20px; + width: 100px; + height: 100px; + background: radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent); + filter: blur(40px); + animation: pulse 4s ease-in-out infinite; +} + +.footer-section h4 { + font-size: 1.5rem; + margin-bottom: 25px; + text-transform: uppercase; + letter-spacing: 2px; + position: relative; + display: inline-block; + background: linear-gradient(45deg, var(--white), var(--accent-blue)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Animated underline for headers */ +.footer-section h4::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 50px; + height: 2px; + background: var(--accent-blue); + box-shadow: 0 0 10px var(--accent-blue); + animation: expandWidth 2s ease-out forwards; +} + +@keyframes expandWidth { + from { width: 0; } + to { width: 50px; } +} + +.footer-section ul { + list-style: none; +} + +.footer-section ul li { + margin-bottom: 15px; + position: relative; + padding-left: 20px; +} + +/* Animated bullet points */ +.footer-section ul li::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + background: var(--accent-blue); + border-radius: 50%; + box-shadow: 0 0 10px var(--accent-blue); + animation: bulletPulse 2s ease-in-out infinite; +} + +@keyframes bulletPulse { + 0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.5; } + 50% { transform: translateY(-50%) scale(1.5); opacity: 1; } +} + +.footer-section a { + color: var(--white); + text-decoration: none; + opacity: 0.7; + transition: all 0.3s ease; + position: relative; + display: inline-block; +} + +.footer-section a:hover { + opacity: 1; + color: var(--accent-blue); + transform: translateX(5px); +} + +/* Glitch effect on hover */ +.footer-section a:hover::before { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + animation: glitchText 0.3s ease-out; +} + +/* Contact info styling */ +.footer-section p { + opacity: 0.8; + margin-bottom: 10px; +} + +/* Only apply icons to contact section */ +.footer-section:last-child p { + display: flex; + align-items: center; + gap: 10px; +} + +/* Add icons for contact */ +.footer-section:last-child p::before { + content: ''; + width: 20px; + height: 20px; + display: inline-block; + background: var(--accent-blue); + mask-size: contain; + -webkit-mask-size: contain; +} + +.footer-section:last-child p:first-of-type::before { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); +} + +.footer-section:last-child p:last-of-type::before { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); +} + +/* Copyright section */ +.copyright { + margin-top: 60px; + padding-top: 40px; + border-top: 1px solid rgba(0, 212, 255, 0.1); + font-size: 0.9rem; + opacity: 0.6; + text-align: center; + position: relative; +} + +/* Bottom decoration */ +.footer-content::after { + content: ''; + position: absolute; + bottom: -50px; + right: -50px; + width: 200px; + height: 200px; + background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent); + filter: blur(60px); + animation: float 6s ease-in-out infinite; +} + +/* Animations */ +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Noise/Grain Effect */ +body::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + opacity: 0.02; + z-index: 10000; + background-image: + repeating-radial-gradient( + circle at 0 0, + transparent 0, + #000 1px, + transparent 2px, + transparent 4px + ); + animation: grain 8s steps(10) infinite; +} + +@keyframes grain { + 0%, 100% { transform: translate(0, 0); } + 10% { transform: translate(-5%, -10%); } + 20% { transform: translate(-15%, 5%); } + 30% { transform: translate(7%, -25%); } + 40% { transform: translate(-5%, 25%); } + 50% { transform: translate(-15%, 10%); } + 60% { transform: translate(15%, 0%); } + 70% { transform: translate(0%, 15%); } + 80% { transform: translate(3%, 35%); } + 90% { transform: translate(-10%, 10%); } +} + +/* Section Transitions - REMOVED */ + +/* Circuit Board Transition */ +.transition-circuit { + background: #000; + position: relative; +} + +.transition-circuit::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(90deg, transparent 45%, rgba(0, 212, 255, 0.2) 45%, rgba(0, 212, 255, 0.2) 55%, transparent 55%), + linear-gradient(0deg, transparent 45%, rgba(0, 212, 255, 0.2) 45%, rgba(0, 212, 255, 0.2) 55%, transparent 55%); + background-size: 40px 40px; + animation: circuitPulse 4s ease-in-out infinite; +} + +.transition-circuit::after { + content: ''; + position: absolute; + inset: 0; + background: + radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.4) 0%, transparent 4%), + radial-gradient(circle at 40% 30%, rgba(0, 212, 255, 0.4) 0%, transparent 4%), + radial-gradient(circle at 60% 70%, rgba(0, 212, 255, 0.4) 0%, transparent 4%), + radial-gradient(circle at 80% 40%, rgba(0, 212, 255, 0.4) 0%, transparent 4%); + background-size: 100% 100%; + animation: nodePulse 2s ease-in-out infinite; +} + +@keyframes circuitPulse { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 1; } +} + +@keyframes nodePulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.2); opacity: 0.6; } +} + +/* Data Flow Transition */ +.transition-dataflow { + background: #000; + position: relative; +} + +.transition-dataflow::before { + content: '0101010110101011101010101101010111010101011010101110101010110101'; + position: absolute; + top: 0; + left: -100%; + right: -100%; + bottom: 0; + font-family: monospace; + font-size: 20px; + color: rgba(0, 212, 255, 0.1); + display: flex; + align-items: center; + justify-content: center; + letter-spacing: 5px; + animation: dataStream 10s linear infinite; + white-space: nowrap; +} + +.transition-dataflow::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(90deg, + transparent 0%, + rgba(0, 212, 255, 0.2) 45%, + rgba(0, 212, 255, 0.4) 50%, + rgba(0, 212, 255, 0.2) 55%, + transparent 100% + ); + animation: dataWave 3s linear infinite; +} + +@keyframes dataStream { + to { transform: translateX(50%); } +} + +@keyframes dataWave { + to { transform: translateX(100%); } +} + +/* Neural Wave Transition */ +.transition-neural { + background: #000; + position: relative; +} + +.transition-neural svg { + position: absolute; + width: 100%; + height: 100%; +} + +.transition-neural path { + fill: none; + stroke: rgba(0, 212, 255, 0.3); + stroke-width: 2; + animation: waveAnimation 4s ease-in-out infinite; +} + +@keyframes waveAnimation { + 0%, 100% { + d: path("M0,100 Q250,50 500,100 T1000,100 L1000,200 L0,200 Z"); + } + 50% { + d: path("M0,100 Q250,150 500,100 T1000,100 L1000,200 L0,200 Z"); + } +} + +/* Glitch Bars Transition */ +.transition-glitch { + background: #000; + position: relative; +} + +.glitch-bar { + position: absolute; + left: 0; + right: 0; + height: 4px; + background: var(--accent-blue); + animation: glitchBar 3s linear infinite; +} + +.glitch-bar:nth-child(1) { top: 20%; animation-delay: 0s; } +.glitch-bar:nth-child(2) { top: 40%; animation-delay: 0.5s; } +.glitch-bar:nth-child(3) { top: 60%; animation-delay: 1s; } +.glitch-bar:nth-child(4) { top: 80%; animation-delay: 1.5s; } + +@keyframes glitchBar { + 0%, 10%, 90%, 100% { + transform: translateX(0) scaleX(1); + opacity: 1; + } + 45% { + transform: translateX(-10%) scaleX(0.8); + opacity: 0.5; + } + 50% { + transform: translateX(10%) scaleX(1.2); + opacity: 0.8; + } + 55% { + transform: translateX(-5%) scaleX(0.5); + opacity: 1; + } +} + +/* Tech Grid Transition */ +.transition-techgrid { + background: #000; + position: relative; + clip-path: polygon( + 0 0, 100% 0, + 100% 30%, 95% 35%, 90% 30%, 85% 35%, 80% 30%, 75% 35%, 70% 30%, 65% 35%, 60% 30%, 55% 35%, 50% 30%, 45% 35%, 40% 30%, 35% 35%, 30% 30%, 25% 35%, 20% 30%, 15% 35%, 10% 30%, 5% 35%, 0 30%, + 0 70%, 5% 65%, 10% 70%, 15% 65%, 20% 70%, 25% 65%, 30% 70%, 35% 65%, 40% 70%, 45% 65%, 50% 70%, 55% 65%, 60% 70%, 65% 65%, 70% 70%, 75% 65%, 80% 70%, 85% 65%, 90% 70%, 95% 65%, 100% 70%, + 100% 100%, 0 100% + ); +} + +.transition-techgrid::before { + content: ''; + position: absolute; + inset: 0; + background: + repeating-linear-gradient(90deg, + transparent, + transparent 10px, + rgba(0, 212, 255, 0.1) 10px, + rgba(0, 212, 255, 0.1) 11px + ), + repeating-linear-gradient(0deg, + transparent, + transparent 10px, + rgba(0, 212, 255, 0.1) 10px, + rgba(0, 212, 255, 0.1) 11px + ); + animation: gridSlide 5s linear infinite; +} + +@keyframes gridSlide { + to { transform: translate(11px, 11px); } +} + +/* Parallax Sections */ +section { + position: relative; +} + +.parallax-bg { + position: absolute; + top: -20%; + left: 0; + right: 0; + bottom: -20%; + background-attachment: fixed; + background-position: center; + background-size: cover; + opacity: 0.1; + z-index: -1; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-menu { + display: none; + } + + .main-title { + font-size: 3rem; + } + + .section-title { + font-size: 2.5rem; + } + + /* Video on mobile */ + .hero-video { + width: 100%; + height: 100%; + } + + .timeline::before { + left: 30px; + } + + .timeline-item { + flex-direction: row !important; + } + + .timeline-item::before { + left: 30px; + transform: translateX(0); + } + + .timeline-content { + text-align: left !important; + padding-left: 100px !important; + } + + .feature-nodes { + grid-template-columns: 1fr; + } + + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .trust-indicators { + gap: 2rem; + } + + .engineering-grid { + grid-template-columns: 1fr; + } +} + +/* Accessibility - Keyboard Navigation */ +*:focus { + outline: 3px solid var(--accent-blue); + outline-offset: 2px; +} + +button:focus, +a:focus { + outline: 3px solid var(--accent-blue); + outline-offset: 2px; +} + +/* Skip Navigation Link */ +.skip-nav { + position: absolute; + top: -40px; + left: 0; + background: var(--primary-blue); + color: var(--white); + padding: 8px; + text-decoration: none; + z-index: 100; +} + +.skip-nav:focus { + top: 0; +} + +/* Additional Accessibility for Interactive Elements */ +.timeline-item:focus-within { + transform: scale(1.05); +} + +.node:focus { + transform: translateY(-5px); + box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3); +} + +.node:focus .node-info { + opacity: 1; + transform: translateY(0); +} + +.tab:focus { + background: var(--accent-blue); + color: var(--dark-blue); +} + +/* Make hover effects work on focus too */ +.timeline-item:focus-within .timeline-icon, +.timeline-item:hover .timeline-icon { + transform: scale(1.1); + border-color: var(--white); +} + +.shield:focus { + transform: scale(1.1); +} + +/* Reduced Motion */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .stream, + .hero-title span, + .shield, + .indicator-value { + animation: none !important; + } +} \ No newline at end of file