/* Main Stylesheet - AI Agency Landing Page Generator */
/* Extracted from inline styles for better performance and SEO */

:root {
    --primary: #2563EB; /* Enterprise Blue */
    --secondary: #0F172A; /* Slate 900 */
    --accent: #F59E0B; /* Amber */
    --dark: #0F172A;
    --light: #F8FAFC;
}

body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    line-height: 1.6; 
    color: var(--dark); 
    margin: 0; 
    padding: 0; 
}

.container { 
    max-width: 1280px; 
    margin: 0 auto; 
    padding: 0 1.5rem; 
}

.section { 
    padding: 5rem 0; 
}

.bg-light { 
    background-color: var(--light); 
}

.text-center { 
    text-align: center; 
}

h1, h2, h3, h4 { 
    line-height: 1.2; 
    letter-spacing: -0.02em; 
}

h1 { 
    font-size: 3.5rem; 
    font-weight: 800; 
    color: var(--secondary); 
}

h2 { 
    font-size: 2.5rem; 
    font-weight: 700; 
    margin-bottom: 1.5rem; 
}

h3 { 
    font-size: 1.5rem; 
    font-weight: 600; 
}

.btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0.875rem 2rem; 
    background: var(--primary); 
    color: white; 
    text-decoration: none; 
    border-radius: 0.375rem; 
    font-weight: 600; 
    transition: all 0.2s; 
}

.btn:hover { 
    background: #1D4ED8; 
    transform: translateY(-1px); 
}

.grid { 
    display: grid; 
    gap: 2rem; 
}

.grid-2 { 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
}

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

.card { 
    background: white; 
    padding: 2rem; 
    border-radius: 0.75rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); 
    transition: transform 0.2s; 
}

.card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); 
}

.icon-box svg { 
    width: 40px; 
    height: 40px; 
    color: var(--primary); 
}

/* B2B Specifics */
.nav-link { 
    color: var(--secondary); 
    font-weight: 500; 
    text-decoration: none; 
    margin-left: 2rem; 
}

.nav-link:hover { 
    color: var(--primary); 
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}