.gradient-text {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(135deg, #00c8c8 0%, #ad87ed 50%, #00c8c8 100%);
    background: linear-gradient(135deg, lab(72.8887% -58.9787 -17.4808) 0%, lab(63.1007% 30.9343 -46.8099) 50%, lab(72.8887% -58.9787 -17.4808) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

header { position: fixed; width: 100%; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); z-index: 100; transition: height 0.3s ease, background-color 0.3s ease; }
header.small { height: 30px; }

/*Печать в консоли*/
.command { position: relative; overflow: hidden; width: 490px; height: 140px; }
.command::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 2px, transparent 2px, transparent 4px); pointer-events: none; }
.command code { display: block; font-size: 0.95rem; line-height: 1.85; color: #58a6ff; white-space: pre-wrap; word-break: break-word; letter-spacing: 0.3px; }
.command code .line { display: block; opacity: 0; transition: opacity 0.15s ease; }
.command code .line.visible { opacity: 1; }
.command code .prompt { color: #3fb950; margin-right: 8px; user-select: none; }
.command code .output { color: #8b949e; }
.command code .cursor { display: inline-block; width: 8px; height: 1.1em; background: #58a6ff; vertical-align: text-bottom; margin-left: 2px; }
@media (max-width: 600px) { .command { padding: 18px 20px; } .command code { font-size: 0.8rem; } }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.project-card img { width: 100%; border-radius: 10px 10px 0 0; height: 200px; object-fit: cover; }
.project-card-container { padding: 30px; }
.project-card { display: flex; flex-direction: column; height: 100%; }
.gallery { flex-shrink: 0; }
.project-card-container { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.project-card-container h3 { flex-shrink: 0; margin-bottom: 8px; }
.project-card-container p { flex: 1; margin: 0; overflow-y: auto; }
.tags { flex-shrink: 0; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: rgba(140, 160, 210, 0.2); padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; color: #bcc4d8; }

.scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 50%; color: #fff; font-size: 1.4rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 20px rgb(0 6 32 / 45%); z-index: 9999; display: flex; align-items: center; justify-content: center; outline: none; }
.scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-to-top:hover { background: linear-gradient(135deg, #7b93f5 0%, #8b5fc0 100%); }
.scroll-to-top svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease; }
.scroll-to-top:hover svg { transform: translateY(-2px); }
@media (max-width: 768px) { .scroll-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; font-size: 1.2rem; } .scroll-to-top svg { width: 18px; height: 18px; } }

.tag-select { border: 1px solid rgba(255, 255, 255, 0.2); padding: 3px 10px; margin-bottom: 10px; display: inline-block; border-radius: 5px; cursor: pointer; }
.tag-select.active { background: #043859; }
.terminal-block ul, .terminal-block ol { margin-left: 20px; }

.techstack-pyramid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.techstack-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.techstack-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 80px; padding: 8px; border-radius: 10px;
                  background: #ffffff08; border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
                  transition: all .3s ease; text-decoration: none; cursor: pointer; }
.techstack-item img { width: 40px; height: 40px; object-fit: contain; filter: grayscale(100%) contrast(1.2) brightness(1.5); opacity: .85; transition: filter .3s ease, opacity .3s ease; }
.techstack-item:hover img { filter: none; opacity: 1 }
.techstack-item span { font-size: 12px; color: #ffffffb3; margin-top: 5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.techstack-item:hover span { color: #fff }


@media (max-width: 768px) {
    .command, .hero .command { width: 100%; padding-top: 10px; }
    .hero { padding: 60px 0; }
    .container { padding: 0; }
}