:root {
    --bg-overlay: rgba(9, 9, 11, 0.9);
    --card-bg: rgba(24, 24, 27, 0.75);
    --text: #f4f4f5;
    --primary: #10b981;
    --radius: 14px;
    --border: rgba(255, 255, 255, 0.08);
}

.light {
    --bg-overlay: rgba(255, 255, 255, 0.94);
    --card-bg: rgba(244, 244, 245, 0.85);
    --text: #18181b;
    --primary: #059669;
    --border: rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: url('bg.jpg') no-repeat center center fixed;
    background-size: cover;
    transition: 0.3s;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-overlay);
    z-index: -1;
    transition: 0.3s;
}

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

/* Навигация */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 25px 0; }
.logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -1px; }
.dot { color: var(--primary); }

/* Карточки и Сворачивание */
.card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 25px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease;
}

summary { list-style: none; cursor: pointer; outline: none; }
summary::-webkit-details-marker { display: none; }

.toggle-icon { float: right; font-size: 0.8rem; transition: 0.3s ease; opacity: 0.5; margin-top: 5px; }
details[open] .toggle-icon { transform: rotate(180deg); }

.details-content {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    animation: fadeIn 0.4s ease;
}

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

/* Контакты */
.contact-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; text-align: left; }
.contact-group h4 { font-size: 0.8rem; text-transform: uppercase; opacity: 0.5; margin-bottom: 8px; }
.contact-group a { display: block; color: inherit; text-decoration: none; font-size: 0.95rem; margin-bottom: 4px; transition: 0.2s; }
.contact-group a:hover { color: var(--primary); }

/* Hero */
.hero { text-align: center; padding: 40px 0; }
.avatar { width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--primary); margin-bottom: 20px; object-fit: cover; }
h1 { font-size: 2.2rem; margin-bottom: 10px; }
.subtitle { color: var(--primary); font-weight: 600; margin-bottom: 25px; }

/* Timeline */
.section-title { margin: 40px 0 25px; border-left: 4px solid var(--primary); padding-left: 15px; font-size: 1.5rem; }
.timeline { border-left: 2px solid var(--primary); margin-left: 15px; padding-left: 30px; position: relative; }
.timeline-item { position: relative; margin-bottom: 30px; }
.timeline-dot { position: absolute; left: -39px; top: 12px; width: 14px; height: 14px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 10px var(--primary); }
.date { color: var(--primary); font-weight: 800; font-size: 0.85rem; }
.company-name { font-size: 1.25rem; margin-top: 5px; color: var(--primary); display: inline-block; }
.position { font-weight: 700; opacity: 0.9; }

.career-path { margin-top: 5px; }
.path-step { position: relative; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid rgba(16, 185, 129, 0.3); }
.path-step strong { display: block; font-size: 0.95rem; }
.path-step p { font-size: 0.85rem; opacity: 0.7; }

/* Сетка и Проекты */
.badge { display: inline-block; padding: 6px 14px; background: rgba(16, 185, 129, 0.15); border: 1px solid var(--primary); border-radius: 20px; font-size: 0.85rem; color: var(--primary); font-weight: 600; margin-top: 15px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; }
.full-width { grid-column: span 2; }
.p-link { text-decoration: none; color: inherit; text-align: center; font-weight: 700; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.p-link:hover { background: rgba(16, 185, 129, 0.15); color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2); }

/* Иконки и Футер */
.social-links { display: flex; justify-content: center; gap: 20px; font-size: 1.6rem; margin-top: 10px; }
.social-links a { color: inherit; transition: 0.3s; }
.social-links a:hover { color: var(--primary); transform: scale(1.1); }
.btn-icon { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.2rem; }

footer { text-align: center; padding: 50px 0; opacity: 0.5; font-size: 0.9rem; }
.footer-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--primary); }

@media (max-width: 650px) {
    .contact-section, .grid { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
    h1 { font-size: 1.8rem; }
}