/* --- Базовые настройки --- */
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background-color: #121212;
            color: #e0e0e0;
            font-family: 'Montserrat', sans-serif; /* Твой шрифт */
            display: flex;
            justify-content: center;
            padding: 40px 20px;
            min-height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            gap: 20px; /* Отступы между блоками */
        }

        /* Общий стиль для всех 4-х подложек */
        .card {
            background-color: #1e1e1e;
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #333;
            box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        }

        /* --- 1. Блок "Обо мне" --- */
        .card-about {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
        }

        .about-text h1 { font-size: 2.2rem; font-weight: 700; color: #fff; margin-bottom: 5px; }
        .about-text .nick { color: #bb86fc; font-family: monospace; font-size: 1.1rem; display: block; margin-bottom: 15px; }
        .about-text p { line-height: 1.6; color: #aaa; font-weight: 300; }

        .avatar {
            width: 160px;
            height: 160px;
            object-fit: cover;
            border-radius: 50%;
            border: 3px solid #2d2d2d;
        }

        /* Сетка для средних блоков (Навыки и Интересы) */
        .middle-row {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Две равные колонки */
            gap: 20px;
        }

        h2 { font-size: 1.4rem; color: #fff; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 10px; display: inline-block; }

        /* Стиль для списков (тегов) */
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tag {
            background-color: #2d2d2d;
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 0.9rem;
            border-left: 3px solid #bb86fc; /* Фиолетовая полоска */
            transition: 0.2s;
        }
        .tag:hover { transform: translateX(5px); background-color: #333; }

        /* --- 4. Блок "Проекты и Контакты" --- */
        .project-item {
    background-color: #252525;
    height: 160px; /* Чуть увеличили высоту */
    border-radius: 12px;
    border: 1px solid #333;
    
    display: flex;
    flex-direction: column; /* Элементы друг под другом */
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 15px; /* Расстояние между названием и кнопками */
    
    transition: 0.3s;
}

.project-item:hover {
    border-color: #555;
    background-color: #2a2a2a;
}

/* Название проекта внутри карточки */
.project-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #e0e0e0;
}

/* Контейнер для кнопок (чтобы стояли в ряд) */
.project-actions {
    display: flex;
    gap: 10px; /* Расстояние между кнопками */
    width: 100%;
}

/* Общий стиль кнопок внутри проекта */
.p-btn {
    flex: 1; /* Кнопки растянутся на всю ширину поровну */
    text-decoration: none;
    text-align: center;
    padding: 8px 0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.2s;
}

/* Стиль кнопки "Сайт" (Акцентная) */
.demo {
    background-color: #bb86fc;
    color: #121212; /* Темный текст на ярком фоне */
}
.demo:hover {
    background-color: #a370db;
}

/* Стиль кнопки "Код" (Контурная) */
.code {
    background-color: transparent;
    border: 1px solid #bb86fc;
    color: #bb86fc;
}
.code:hover {
    background-color: rgba(187, 134, 252, 0.1); /* Легкая подсветка фона */
}
        /* Секция контактов внутри проектов */
        .footer-contacts {
            border-top: 1px solid #333;
            padding-top: 20px;
            text-align: center;
        }
        .footer-contacts h3 { font-size: 1.1rem; margin-bottom: 15px; color: #aaa; }
        
        .contact-links { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
        
        .btn {
            text-decoration: none;
            color: #fff;
            background: #333;
            padding: 10px 25px;
            border-radius: 50px; /* Овальные кнопки */
            font-weight: 600;
            transition: 0.3s;
        }
        .btn:hover { background: #bb86fc; color: #000; }

        /* --- Адаптивность --- */
        @media (max-width: 768px) {
            .card-about { flex-direction: column-reverse; text-align: center; }
            .middle-row { grid-template-columns: 1fr; } /* Блоки встают друг под друга */
        }