/* ========================================
ARCUS AI SERVICES - Landing Page JavaScript
Smooth Scrolling, Animations & Interactive Effects
======================================== */
// ========================================
// INITIALIZATION
// ========================================
document.addEventListener('DOMContentLoaded', function() {
initSmoothScrolling();
initScrollAnimations();
initParallaxEffects();
initHoverEffects();
initNavigation();
initGlowEffects();
});
// ========================================
// SMOOTH SCROLLING
// ========================================
function initSmoothScrolling() {
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
const headerOffset = 80;
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
// Smooth scroll with easing for programmatic scrolling
window.smoothScrollTo = function(target, duration = 1000) {
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
let startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const run = easeInOutCubic(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function easeInOutCubic(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t * t + b;
t -= 2;
return c / 2 * (t * t * t + 2) + b;
}
requestAnimationFrame(animation);
};
}
// ========================================
// SCROLL-TRIGGERED ANIMATIONS
// ========================================
function initScrollAnimations() {
// Create Intersection Observer for fade-in animations
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const fadeInObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
// Stagger children animations
const children = entry.target.querySelectorAll('.animate-child');
children.forEach((child, index) => {
setTimeout(() => {
child.classList.add('animate-in');
}, index * 150);
});
observer.unobserve(entry.target);
}
});
}, observerOptions);
// Add animation classes to elements
const animatedElements = document.querySelectorAll(
'.page-title, .page-subtitle, .section-title, .section-subtitle, ' +
'.service-intro-card, .consultation-card, .software-card, ' +
'.analytics-card, .security-card, .cta-button, ' +
'.security-description, .section-description, .cta-tagline'
);
animatedElements.forEach(el => {
el.classList.add('animate-element');
fadeInObserver.observe(el);
});
// Add CSS for animations dynamically
const animationStyles = document.createElement('style');
animationStyles.textContent = `
.animate-element {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-element.animate-in {
opacity: 1;
transform: translateY(0);
}
.animate-child {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-child.animate-in {
opacity: 1;
transform: translateY(0);
}
/* Slide in from left */
.slide-left {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-left.animate-in {
opacity: 1;
transform: translateX(0);
}
/* Slide in from right */
.slide-right {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-right.animate-in {
opacity: 1;
transform: translateX(0);
}
/* Scale up animation */
.scale-up {
opacity: 0;
transform: scale(0.8);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scale-up.animate-in {
opacity: 1;
transform: scale(1);
}
`;
document.head.appendChild(animationStyles);
}
// ========================================
// PARALLAX EFFECTS
// ========================================
function initParallaxEffects() {
const parallaxElements = document.querySelectorAll('.section-background');
window.addEventListener('scroll', throttle(() => {
const scrolled = window.pageYOffset;
parallaxElements.forEach(el => {
const section = el.parentElement;
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
// Only apply parallax when section is in view
if (scrolled > sectionTop - window.innerHeight &&
scrolled < sectionTop + sectionHeight) {
const yPos = (scrolled - sectionTop) * 0.2;
el.style.transform = `translateY(${yPos}px)`;
}
});
}, 16));
}
// ========================================
// HOVER EFFECTS
// ========================================
function initHoverEffects() {
// Magnetic button effect for CTA buttons
const magneticButtons = document.querySelectorAll('.cta-button');
magneticButtons.forEach(button => {
button.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
this.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
});
button.addEventListener('mouseleave', function() {
this.style.transform = 'translate(0, 0)';
});
});
// Card tilt effect
const tiltCards = document.querySelectorAll(
'.service-intro-card, .consultation-card, .software-card, ' +
'.analytics-card, .security-card'
);
tiltCards.forEach(card => {
card.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / 25;
const rotateY = (centerX - x) / 25;
this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
});
});
// Icon animation on card hover
const cardsWithIcons = document.querySelectorAll(
'.service-intro-card, .software-card, .analytics-card, .security-card'
);
cardsWithIcons.forEach(card => {
const icon = card.querySelector('.service-icon, .software-icon, .analytics-icon, .security-icon');
if (icon) {
card.addEventListener('mouseenter', () => {
icon.style.transform = 'scale(1.1) rotate(5deg)';
icon.style.transition = 'transform 0.3s ease';
});
card.addEventListener('mouseleave', () => {
icon.style.transform = 'scale(1) rotate(0deg)';
});
}
});
}
// ========================================
// GLOW EFFECTS
// ========================================
function initGlowEffects() {
// Dynamic glow that follows mouse on cards
const glowCards = document.querySelectorAll(
'.service-intro-card, .consultation-card, .software-card, ' +
'.analytics-card, .security-card'
);
glowCards.forEach(card => {
card.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
this.style.background = `
radial-gradient(
circle at ${x}% ${y}%,
rgba(139, 92, 246, 0.15) 0%,
rgba(255, 255, 255, 0.03) 50%
)
`;
});
card.addEventListener('mouseleave', function() {
this.style.background = 'rgba(255, 255, 255, 0.03)';
});
});
}
// ========================================
// NAVIGATION
// ========================================
function initNavigation() {
// Create floating navigation dots
const sections = document.querySelectorAll('section');
const navContainer = document.createElement('nav');
navContainer.className = 'floating-nav';
const sectionNames = [
'Services Intro',
'Consultation',
'Software & Chatbots',
'Analytics',
'Security',
'Get Started'
];
sections.forEach((section, index) => {
const dot = document.createElement('a');
dot.className = 'nav-dot';
dot.href = `#${section.id}`;
dot.setAttribute('data-section', index);
// Tooltip with section name
const tooltip = document.createElement('span');
tooltip.className = 'nav-tooltip';
tooltip.textContent = sectionNames[index] || section.id.replace(/-/g, ' ');
dot.appendChild(tooltip);
navContainer.appendChild(dot);
});
document.body.appendChild(navContainer);
// Add navigation styles
const navStyles = document.createElement('style');
navStyles.textContent = `
.floating-nav {
position: fixed;
right: 30px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 15px;
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
position: relative;
cursor: pointer;
}
.nav-dot:hover,
.nav-dot.active {
background: #00d4ff;
border-color: #00d4ff;
box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
transform: scale(1.3);
}
.nav-tooltip {
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
background: rgba(10, 10, 26, 0.95);
color: #fff;
padding: 8px 15px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(0, 212, 255, 0.3);
}
.nav-dot:hover .nav-tooltip {
opacity: 1;
visibility: visible;
right: 30px;
}
@media (max-width: 768px) {
.floating-nav {
display: none;
}
}
`;
document.head.appendChild(navStyles);
// Update active dot on scroll
window.addEventListener('scroll', throttle(() => {
const scrollPosition = window.pageYOffset + window.innerHeight / 2;
sections.forEach((section, index) => {
const sectionTop = section.offsetTop;
const sectionBottom = sectionTop + section.offsetHeight;
const dot = document.querySelector(`.nav-dot[data-section="${index}"]`);
if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
document.querySelectorAll('.nav-dot').forEach(d => d.classList.remove('active'));
if (dot) dot.classList.add('active');
}
});
}, 100));
}
// ========================================
// SCROLL PROGRESS INDICATOR
// ========================================
(function initScrollProgress() {
const progressBar = document.createElement('div');
progressBar.className = 'scroll-progress';
progressBar.style.cssText = `
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, #ff00ff, #8b5cf6, #00d4ff);
z-index: 9999;
transition: width 0.1s ease;
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
`;
document.body.appendChild(progressBar);
window.addEventListener('scroll', throttle(() => {
const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrolled = (window.pageYOffset / windowHeight) * 100;
progressBar.style.width = `${scrolled}%`;
}, 10));
})();
// ========================================
// UTILITY FUNCTIONS
// ========================================
// Throttle function for scroll events
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// Debounce function for performance
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// Check if element is in viewport
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// ========================================
// CARD REVEAL ANIMATION
// ========================================
(function initCardReveal() {
const cards = document.querySelectorAll(
'.service-intro-card, .consultation-card, .software-card, ' +
'.analytics-card, .security-card'
);
const cardObserver = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, index * 100);
cardObserver.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
cards.forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
cardObserver.observe(card);
});
})();
// ========================================
// ICON PULSE ANIMATION
// ========================================
(function initIconPulse() {
const icons = document.querySelectorAll(
'.service-icon, .software-icon, .analytics-icon, .security-icon'
);
icons.forEach(icon => {
icon.style.animation = 'iconPulse 3s ease-in-out infinite';
});
const pulseStyles = document.createElement('style');
pulseStyles.textContent = `
@keyframes iconPulse {
0%, 100% {
filter: drop-shadow(0 0 5px currentColor);
}
50% {
filter: drop-shadow(0 0 15px currentColor);
}
}
`;
document.head.appendChild(pulseStyles);
})();
console.log('Arcus AI Services - Landing Page Scripts Loaded');
Arcus AI Services - Discover & Empower
Arcus AI Services
Discover & Empower
Strategic Workflow Audit
Discover hidden inefficiencies. We dive deep into your daily operations to identify bottlenecks and manual processes draining your resources.
Key Benefits:
Identify bottlenecks
Actionable roadmap
AI Educational Workshops
Empower your team. Our hands-on workshops demystify technology and equip your employees with practical skills they can use immediately.
Key Benefits:
Hands-on training
Remove intimidation
AI Consultation & Automation Implementation
Expert Guidance. Seamless Systems.
Get direct access to strategic thinking shaped by real-world implementation experience.
● Budget-friendly strategy● Avoid costly mistakes
We deploy workflows for data entry, follow-ups, and scheduling so your team can focus on value.
● Eliminate repetitive tasks● Reliable background operations
Custom Software & AI Chatbots
Solutions Built for Your Business
Custom Software Builds
Solutions built for your business.
We build tools engineered specifically around how you operate, integrating AI capabilities that solve unique challenges.
● Tailored internal tools● No "off-the-shelf" limits● Integrates with existing systems
AI Chatbot Development
24/7 instant answers.
Intelligent chatbots that handle inquiries, qualify leads, and book appointments while your team sleeps.
● Qualify leads automatically● Instant customer support● Works around the clock
Data Analytics, Documents & Integration
Complete Business Solutions
Data Analytics & Reporting
Stop drowning in spreadsheets. We implement AI systems that automatically compile and analyze data for real-time insights.
Document Automation
Generate proposals and reports in seconds. Systematize the documents that keep your business running, from invoices to content creation.
Integration & API Connections
Make existing tools work smarter. We connect your current systems to create a unified ecosystem rather than isolated silos.
Ongoing Support & Optimization
A partner who grows with you. Technology evolves, and so should your systems. Our ongoing support ensures your AI solutions stay current and continue delivering ROI as your business scales.
We Build Walled Gardens.
Your Data Never Leaves Your Walls.
Your competitive secrets, customer info, and proprietary processes remain yours alone.
No-Training Guarantee
Enterprise APIs never train on your data.
Human-in-the-Loop
AI speeds it up, humans sign it off.
Zero Data Retention
Data is processed and immediately discarded.
Ready to Future-Proof Your Business?
Schedule your consultation and workflow audit today.
Join the businesses saving time and costs with Arcus.
/* ========================================
ARCUS AI SOLUTIONS - Landing Page CSS (SEAMLESS BACKGROUND)
Color Scheme: Deep Navy, Neon Magenta, Electric Purple, Cyan
======================================== */
/* CSS Variables */
:root {
--primary-bg: #0a0a1a;
--secondary-bg: #0f0f2a;
--tertiary-bg: #151535;
--neon-magenta: #ff00ff;
--electric-purple: #8b5cf6;
--cyan-accent: #00d4ff;
--teal-accent: #14b8a6;
--white: #ffffff;
--light-gray: #e0e0e0;
--medium-gray: #a0a0a0;
--gradient-magenta-purple: linear-gradient(135deg, #ff00ff 0%, #8b5cf6 100%);
--gradient-purple-cyan: linear-gradient(135deg, #8b5cf6 0%, #00d4ff 100%);
--glow-magenta: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3);
--glow-purple: 0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3);
--glow-cyan: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
}
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: var(--primary-bg);
background-image:
radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
radial-gradient(ellipse at 80% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 40%),
radial-gradient(ellipse at 50% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
background-attachment: fixed;
color: var(--white);
line-height: 1.6;
overflow-x: hidden;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.2;
}
/* Section Base Styles - SEAMLESS BACKGROUND */
section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 5%;
overflow: hidden;
background: transparent;
}
.section-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: transparent;
border: none;
}
.section-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
}
.section-background::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid rgba(255, 0, 255, 0.2);
opacity: 0.5;
animation: float 6s ease-in-out infinite;
}
.section-title {
font-size: clamp(2rem, 5vw, 3.5rem);
text-align: center;
margin-bottom: 1rem;
background: var(--gradient-magenta-purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: clamp(1rem, 2.5vw, 1.5rem);
text-align: center;
color: var(--light-gray);
margin-bottom: 3rem;
}
/* ========================================
SECTION 1: HERO
======================================== */
.hero-section {
min-height: 100vh;
position: relative;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 800px;
}
.hero-logo {
width: 120px;
height: 120px;
margin: 0 auto 2rem;
color: var(--electric-purple);
animation: float 4s ease-in-out infinite;
}
.hero-title {
font-size: clamp(2.5rem, 7vw, 4rem);
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--white) 0%, var(--electric-purple) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: clamp(1.2rem, 3vw, 1.8rem);
color: var(--electric-purple);
margin-bottom: 2rem;
}
.hero-description {
font-size: 1.1rem;
color: var(--light-gray);
line-height: 1.8;
margin-bottom: 3rem;
}
/* ========================================
SECTION 2: PARTNERSHIP
======================================== */
.partnership-section {
position: relative;
}
.partnership-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
}
.partnership-text {
font-size: 1.3rem;
color: var(--light-gray);
line-height: 1.9;
text-align: center;
margin-bottom: 2rem;
}
.partnership-quote {
background: rgba(139, 92, 246, 0.1);
border-left: 4px solid var(--electric-purple);
padding: 2rem;
border-radius: 10px;
font-size: 1.2rem;
color: var(--white);
font-style: italic;
margin: 2rem 0;
}
/* ========================================
SECTION 3: HISTORY
======================================== */
.history-section {
position: relative;
}
.history-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
}
.history-title {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.history-subtitle {
font-size: 1.5rem;
color: var(--electric-purple);
margin-bottom: 3rem;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.comparison-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 15px;
padding: 2rem;
backdrop-filter: blur(10px);
}
.comparison-card h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: var(--cyan-accent);
}
.comparison-card ul {
list-style: none;
padding: 0;
}
.comparison-card li {
color: var(--light-gray);
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.comparison-card li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--neon-magenta);
font-weight: bold;
}
/* ========================================
SECTION 4: FUTURE
======================================== */
.future-section {
position: relative;
}
.future-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
}
.future-title {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.future-subtitle {
font-size: 1.5rem;
color: var(--electric-purple);
margin-bottom: 3rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(0, 212, 255, 0.3);
border-radius: 15px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.feature-card:hover {
border-color: var(--cyan-accent);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
transform: translateY(-5px);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.feature-card p {
color: var(--light-gray);
font-size: 0.95rem;
}
/* ========================================
SECTION 5: INVESTMENT
======================================== */
.investment-section {
position: relative;
}
.investment-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
}
.investment-title {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.investment-subtitle {
font-size: 1.5rem;
color: var(--electric-purple);
margin-bottom: 3rem;
}
.investment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.investment-card {
background: rgba(255, 0, 255, 0.1);
border: 1px solid rgba(255, 0, 255, 0.3);
border-radius: 15px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(10px);
}
.investment-amount {
font-size: 2.5rem;
font-weight: 800;
color: var(--neon-magenta);
margin-bottom: 1rem;
}
.investment-card p {
color: var(--light-gray);
}
/* ========================================
SECTION 6: FORTUNE 500
======================================== */
.fortune-section {
position: relative;
}
.fortune-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
}
.fortune-title {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.fortune-subtitle {
font-size: 1.5rem;
color: var(--electric-purple);
margin-bottom: 3rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.stat-card {
background: rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.3);
border-radius: 15px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(10px);
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--cyan-accent);
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--light-gray);
font-size: 0.95rem;
}
/* ========================================
SECTION 7: SYNERGY
======================================== */
.synergy-section {
position: relative;
}
.synergy-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
}
.synergy-title {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.synergy-subtitle {
font-size: 1.5rem;
color: var(--electric-purple);
margin-bottom: 3rem;
}
.comparison-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.comparison-item h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: var(--cyan-accent);
}
.comparison-item ul {
list-style: none;
padding: 0;
}
.comparison-item li {
color: var(--light-gray);
margin-bottom: 0.8rem;
padding-left: 1.5rem;
position: relative;
}
.comparison-item li::before {
content: '→';
position: absolute;
left: 0;
color: var(--neon-magenta);
}
/* ========================================
SECTION 8: EMPOWERMENT
======================================== */
.empowerment-section {
position: relative;
}
.empowerment-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
text-align: center;
}
.empowerment-title {
font-size: 2.5rem;
margin-bottom: 2rem;
}
.empowerment-message {
font-size: 1.3rem;
color: var(--light-gray);
line-height: 1.9;
margin-bottom: 2rem;
}
/* ========================================
SECTION 9: CALL TO ACTION
======================================== */
.cta-section {
position: relative;
text-align: center;
}
.cta-content {
position: relative;
z-index: 1;
max-width: 800px;
width: 100%;
}
.cta-title {
font-size: 2.5rem;
margin-bottom: 2rem;
}
.cta-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.step-card {
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 15px;
padding: 2rem;
backdrop-filter: blur(10px);
}
.step-number {
font-size: 2rem;
font-weight: 800;
color: var(--neon-magenta);
margin-bottom: 1rem;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid var(--neon-magenta);
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.step-card h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.step-card p {
color: var(--light-gray);
font-size: 0.9rem;
}
.cta-button {
display: inline-block;
padding: 1.5rem 4rem;
font-family: 'Montserrat', sans-serif;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
color: var(--white);
background: var(--gradient-magenta-purple);
border: none;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 2rem;
box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
}
.cta-button:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 0 40px rgba(255, 0, 255, 0.6);
}
.cta-description {
font-size: 1rem;
color: var(--light-gray);
}
/* ========================================
ANIMATIONS
======================================== */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes glow-pulse {
0%, 100% {
box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(255, 0, 255, 0.7), 0 0 60px rgba(255, 0, 255, 0.4);
}
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
@media (max-width: 1024px) {
.comparison-layout {
grid-template-columns: 1fr;
}
.comparison-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
section {
padding: 60px 5%;
}
.section-title {
font-size: 1.8rem;
}
.hero-title {
font-size: 2rem;
}
.features-grid,
.investment-grid,
.stats-grid,
.cta-steps {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
section {
padding: 40px 5%;
}
.cta-button {
width: 100%;
}
}
ARCUS AI SOLUTIONS - Landing Page CSS
Color Scheme: Deep Navy, Neon Magenta, Electric Purple, Cyan
======================================== */
/* CSS Variables */
:root {
--primary-bg: #0a0a1a;
--secondary-bg: #0f0f2a;
--tertiary-bg: #151535;
--neon-magenta: #ff00ff;
--electric-purple: #8b5cf6;
--cyan-accent: #00d4ff;
--teal-accent: #14b8a6;
--white: #ffffff;
--light-gray: #e0e0e0;
--medium-gray: #a0a0a0;
--gradient-magenta-purple: linear-gradient(135deg, #ff00ff 0%, #8b5cf6 100%);
--gradient-purple-cyan: linear-gradient(135deg, #8b5cf6 0%, #00d4ff 100%);
--glow-magenta: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3);
--glow-purple: 0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3);
--glow-cyan: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
}
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: var(--primary-bg);
color: var(--white);
line-height: 1.6;
overflow-x: hidden;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.2;
}
/* Section Base Styles */
section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 5%;
overflow: hidden;
}
.section-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: var(--primary-bg);
}
.section-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at top left, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
}
.section-title {
font-size: clamp(2rem, 5vw, 3.5rem);
text-align: center;
margin-bottom: 1rem;
background: var(--gradient-magenta-purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: clamp(1rem, 2.5vw, 1.5rem);
text-align: center;
color: var(--light-gray);
margin-bottom: 3rem;
}