* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
line-height: 1.6;
color: #333;
background: #fff;
}

.fonda-section {
padding: 4rem 0;
}

.fonda-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

.fonda-card {
background: #fff;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border: 1px solid #f0f0f0;
}

.fonda-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}

.fonda-grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.fade-in {
opacity: 1;
animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #2563eb;
text-align: center;
}

h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 2rem;
color: #1e40af;
}

h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #2563eb;
}

p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: #555;
}

.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
}

.hero h1 {
color: white;
}

.hero p {
font-size: 1.3rem;
color: rgba(255,255,255,0.9);
max-width: 800px;
margin: 0 auto;
}

.story-image {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 12px;
}

.mission-vision .fonda-card {
height: 100%;
border-left: 4px solid #2563eb;
}

.values-section {
background: #f8fafc;
}

.value-card {
text-align: center;
padding: 2.5rem 2rem;
}

.value-icon {
width: 60px;
height: 60px;
background: #2563eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 1.5rem;
}

.cta-section {
background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
color: white;
text-align: center;
}

.cta-section h2 {
color: white;
}

.cta-section p {
color: rgba(255,255,255,0.9);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 2rem;
}

.cta-button {
display: inline-block;
background: white;
color: #2563eb;
padding: 1rem 2.5rem;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
}

.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255,255,255,0.3);
}

@media (max-width: 768px) {
.fonda-grid-2 {
grid-template-columns: 1fr;
}

h1 {
font-size: 2rem;
}

h2 {
font-size: 2rem;
}

.fonda-container {
padding: 0 1rem;
}

.fonda-section {
padding: 3rem 0;
}
}

Our Story

Born from the frustration of countless hours spent on deployment issues, AutonoDeploy AI was created by experienced DevOps engineers who understood the pain of small to medium teams.

We combined cutting-edge artificial intelligence with deep deployment expertise to create the world’s first truly autonomous deployment solution. Our mission is to give development teams their time back while ensuring bulletproof reliability.