:root {
    --primary-color: #5887FF;
    --secondary-color: #468faf;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    scroll-behavior: smooth;
}

.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.hero-section {
    background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 5rem 0;
}

.skill-badge {
    background: var(--primary-color);
    color: white;
    margin: 0.2rem;
    transition: transform 0.2s;
}

.skill-group-title {
    color: #333; /* Тёмный нейтральный */
}

.skill-badge:hover {
    transform: translateY(-2px);
}

.rounded-pill {
    border-radius: 7% !important;
}

.timeline-card {
    border-left: 3px solid var(--primary-color);
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}

.timeline-card::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 15px;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border-radius: 20%;
}

.experience-tech {
    font-size: 0.9rem;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .hero-section {
        padding: 3rem 0;
    }

    .timeline-card {
        padding-left: 1rem;
    }
}