:root {
    --primary: #004a99;
    --accent: #00c853;
    --dark: #1a1a1a;
    --light: #f8fafc;
    --white: #ffffff;
}

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

body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

header { background: var(--white); padding: 20px 0; border-bottom: 1px solid #e2e8f0; }

header .container { display: flex; justify-content: space-between; align-items: center; }

.logo { font-size: 1.5rem; font-weight: 800; color: var(--primary); letter-spacing: -1px; }

nav ul { list-style: none; display: flex; gap: 25px; align-items: center; }

nav a { text-decoration: none; color: var(--dark); font-weight: 500; }

.btn-outline { border: 1px solid var(--primary); padding: 8px 20px; border-radius: 6px; color: var(--primary); font-weight: 600; }

.hero { display: flex; align-items: center; padding: 80px 20px; gap: 40px; }

.hero-content { flex: 1; }

.hero-content h1 { font-size: 3rem; margin-bottom: 20px; line-height: 1.1; }

.hero-content p { font-size: 1.1rem; color: #64748b; margin-bottom: 30px; }

.cta-group { display: flex; gap: 15px; }

.btn-primary { background: var(--primary); color: white; border: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; cursor: pointer; }

.btn-secondary { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid #cbd5e1; padding: 15px 30px; border-radius: 8px; cursor: pointer; }

.hero-visual { flex: 1; display: flex; justify-content: center; }

.hero-icon { width: 200px; height: 200px; color: var(--accent); }

@media (max-width: 768px) {
    .hero { flex-direction: column; text-align: center; }
    .hero-content h1 { font-size: 2.2rem; }
    .cta-group { justify-content: center; }
}

@media (max-width: 480px) {
    header .container {
        flex-direction: column;
        gap: 15px;
    }
}