/* Основные CSS переменные */
:root{
  --bg:#0b0f14;
  --panel:#0f1621;
  --muted:#8aa0bb;
  --text:#dce7ff;
  --accent:#3bf5a1;
  --accent-2:#63a4ff;
  --danger:#ff5c80;
  --warning:#ffd166;
  --radius:14px;
  --shadow:0 0 24px rgba(59,245,161,.25), inset 0 0 0 1px rgba(99,164,255,.12);
  --grid: rgba(99,164,255,.06);
  --glow: 0 0 20px rgba(59,245,161,.4);
  --tech-gradient: linear-gradient(135deg, #3bf5a1 0%, #63a4ff 50%, #3bf5a1 100%);
}



/* Базовые стили */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 800px at 70% -10%, rgba(99,164,255,.12), transparent),
              radial-gradient(800px 600px at 20% 120%, rgba(59,245,161,.08), transparent),
              var(--bg);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  min-height: 100vh;
}

/* Сетка фона */
.grid{
  position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(transparent 31px, var(--grid) 32px),
    linear-gradient(90deg, transparent 31px, var(--grid) 32px);
  background-size:32px 32px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  mask-image: radial-gradient(60% 60% at 50% 40%, black, transparent);
  opacity:.6;
}

/* Анимированные частицы DevOps */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  animation: float 20s infinite linear;
  opacity: 0.3;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 15s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 18s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 22s; }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; animation-duration: 16s; }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; animation-duration: 20s; }
.particle:nth-child(6) { left: 60%; animation-delay: 10s; animation-duration: 17s; }
.particle:nth-child(7) { left: 70%; animation-delay: 12s; animation-duration: 19s; }
.particle:nth-child(8) { left: 80%; animation-delay: 14s; animation-duration: 21s; }
.particle:nth-child(9) { left: 90%; animation-delay: 16s; animation-duration: 14s; }

@keyframes float {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

/* Навигация */
header.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(6px);
  background: rgba(11,15,20,.55);
  border-bottom:1px solid rgba(99,164,255,.15);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px;
}
.logo{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-weight:700; letter-spacing:.3px;
  position: relative;
}
.logo-icon{
  width:28px; height:28px; border-radius:7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 16px rgba(59,245,161,.45), 0 0 32px rgba(99,164,255,.25);
  position:relative;
  animation: pulse 3s ease-in-out infinite;
}
.logo-icon::after{
  content:"";
  position:absolute; inset:4px; border-radius:5px;
  background:rgba(0,0,0,.25);
}
.logo-icon::before {
  content: "⚡";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--accent);
  animation: spark 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes spark {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.nav-actions{margin-left:auto; display:flex; gap:10px}

/* Кнопки */
.btn{
  border:1px solid rgba(99,164,255,.25);
  background: rgba(15,22,33,.7);
  color:var(--text);
  padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow: var(--shadow);
  display:inline-flex; gap:8px; align-items:center;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99,164,255,.2), transparent);
  transition: left 0.5s;
}
.btn:hover::before {
  left: 100%;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(99,164,255,.55)}
.btn.primary{
  background: linear-gradient(180deg, rgba(59,245,161,.25), rgba(15,22,33,.8));
  border-color: rgba(59,245,161,.55);
  box-shadow: 0 0 20px rgba(59,245,161,.35), inset 0 0 0 1px rgba(59,245,161,.3);
}



/* Контейнеры */
.container{ max-width:1200px; margin:0 auto; padding:0 20px}

/* Главная секция */
.hero{
  padding:72px 0 48px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:28px;
  align-items:center;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(99,164,255,.4) 25%, 
    rgba(59,245,161,.6) 50%, 
    rgba(99,164,255,.4) 75%, 
    transparent 100%);
  border-radius: 1px;
}
@media (max-width:900px){ .hero{ grid-template-columns:1fr; padding-top:48px } }
.headline{
  font-size: clamp(28px, 3.2vw, 48px);
  line-height:1.15; letter-spacing:.2px; font-weight:800; margin:0 0 12px;
  text-shadow: 0 0 32px rgba(59,245,161,.15);
  position: relative;
}
.headline::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--tech-gradient);
  border-radius: 2px;
  animation: slideRight 2s ease-in-out infinite alternate;
}
@keyframes slideRight {
  0% { width: 60px; }
  100% { width: 120px; }
}

.subtitle{ color:var(--muted); margin:0 0 24px; max-width:60ch }

/* Терминал */
.terminal{
  background: radial-gradient(600px 300px at 90% -10%, rgba(59,245,161,.12), transparent), var(--panel);
  border-radius: var(--radius);
  border:1px solid rgba(99,164,255,.25);
  box-shadow: var(--shadow);
  padding:18px; min-height:280px; position:relative; overflow:hidden;
  position: relative;
  backdrop-filter: blur(10px);
  position: relative;
}

.terminal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(99,164,255,.03) 50%, transparent 70%);
  pointer-events: none;
  border-radius: var(--radius);
  animation: scanLine 4s linear infinite;
}

@keyframes scanLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.terminal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(99,164,255,.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(59,245,161,.1) 0%, transparent 50%);
  pointer-events: none;
  border-radius: var(--radius);
}

/* Заголовок терминала */
.term-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(99,164,255,.2);
}

.term-title {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(59,245,161,.5);
  animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0% { text-shadow: 0 0 8px rgba(59,245,161,.5); }
  100% { text-shadow: 0 0 16px rgba(59,245,161,.8), 0 0 24px rgba(59,245,161,.4); }
}

.term-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 8px rgba(59,245,161,.6);
  }
  50% { 
    transform: scale(1.2); 
    box-shadow: 0 0 16px rgba(59,245,161,.8);
  }
}

.status-text {
  color: var(--accent);
  font-weight: 600;
  text-shadow: 0 0 4px rgba(59,245,161,.4);
}

.term-top{ 
  display:flex; 
  gap:8px; 
  align-items:center; 
  margin-bottom:10px;
  position: relative;
}

/* Улучшенные точки управления */
.dot{ 
  width:12px; 
  height:12px; 
  border-radius:999px; 
  position: relative;
  animation: dotPulse 3s ease-in-out infinite;
}

.dot:nth-child(1){ 
  background:var(--danger); 
  animation-delay: 0s;
  box-shadow:0 0 12px rgba(255,92,128,.35);
}
.dot:nth-child(2){ 
  background:var(--warning); 
  animation-delay: 1s;
  box-shadow:0 0 12px rgba(255,209,102,.35);
}
.dot:nth-child(3){ 
  background:var(--accent); 
  animation-delay: 2s;
  box-shadow:0 0 12px rgba(59,245,161,.35);
}

/* Эффект ripple для точек */
.dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 2s ease-out infinite;
  animation-delay: inherit;
}

.dot:nth-child(1)::before { animation-delay: 0s; }
.dot:nth-child(2)::before { animation-delay: 1s; }
.dot:nth-child(3)::before { animation-delay: 2s; }

@keyframes dotPulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 12px currentColor;
  }
  50% { 
    transform: scale(1.1); 
    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
  }
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.term-screen{
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  color: var(--accent);
  min-height:150px;
  max-height: 400px;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,.3);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(99,164,255,.1);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 1.4;
  font-size: 13px;
  letter-spacing: 0.5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,164,255,.3) transparent;
}

/* Стили для скроллбара */
.term-screen::-webkit-scrollbar {
  width: 8px;
}

.term-screen::-webkit-scrollbar-track {
  background: transparent;
}

.term-screen::-webkit-scrollbar-thumb {
  background: rgba(99,164,255,.3);
  border-radius: 4px;
}

.term-screen::-webkit-scrollbar-thumb:hover {
  background: rgba(99,164,255,.5);
}

.term-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(59,245,161,.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(99,164,255,.05) 0%, transparent 50%);
  pointer-events: none;
  border-radius: 8px;
  z-index: -1;
}

.term-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(59,245,161,.02) 50%, transparent 100%);
  pointer-events: none;
  border-radius: 8px;
  z-index: -1;
  animation: matrixScan 3s ease-in-out infinite;
}

@keyframes matrixScan {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Стили для разных типов строк в терминале */
.term-screen .system-line {
  color: var(--accent-2);
  font-weight: 600;
}

.term-screen .ok-line {
  color: var(--accent);
}

.term-screen .status-line {
  color: var(--warning);
  font-weight: 500;
}

.term-screen .tip-line {
  color: var(--muted);
  font-style: italic;
}

.term-screen .deploy-line {
  color: var(--accent);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(59,245,161,.4);
}
.cursor{ 
  display:inline-block; 
  width:.6ch; 
  background:var(--accent); 
  margin-left:2px; 
  animation: blink 1s steps(1) infinite;
  box-shadow: 0 0 8px rgba(59,245,161,.6);
}
@keyframes blink{ 50%{opacity:0} }

/* Панели */
.panels{ 
  display:grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap:16px; 
  margin:32px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(99,164,255,.1);
  border-bottom: 1px solid rgba(99,164,255,.1);
}
@media (max-width:900px){ .panels{ grid-template-columns:1fr } }
.panel{
  background: linear-gradient(180deg, rgba(99,164,255,.07), rgba(15,22,33,.8));
  border:1px solid rgba(99,164,255,.25);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tech-gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.panel:hover::before {
  transform: scaleX(1);
}
.panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(99,164,255,.3);
}
.panel h3{ margin:0 0 10px }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.3px;
  background: rgba(59,245,161,.12); color: var(--accent); border:1px solid rgba(59,245,161,.4);
  box-shadow:0 0 14px rgba(59,245,161,.25);
  position: relative;
  overflow: hidden;
}
.tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59,245,161,.3), transparent);
  transition: left 0.6s;
}
.tag:hover::before {
  left: 100%;
}

/* Секции */
.section{ 
  padding:56px 0 40px;
  position: relative;
}
.section:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 800px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(99,164,255,.3) 20%, 
    rgba(99,164,255,.5) 50%, 
    rgba(99,164,255,.3) 80%, 
    transparent 100%);
  border-radius: 1px;
}
.section h2{ 
  margin:0 0 6px; 
  font-size: clamp(22px, 2.4vw, 34px);
  position: relative;
  display: inline-block;
}
.section h2::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--tech-gradient);
  border-radius: 1px;
  transform: scaleX(0);
  animation: expandWidth 1s ease-out 0.5s forwards;
}
@keyframes expandWidth {
  to { transform: scaleX(1); }
}
.section .lead{ color:var(--muted); margin:0 0 14px }

/* Карточки */
.cards{ 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 16px; 
  align-items: stretch;
}
@media (max-width:1000px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:680px){ .cards{ grid-template-columns: 1fr; } }
.card{
  background: linear-gradient(135deg, 
    rgba(59,245,161,.08) 0%, 
    rgba(99,164,255,.04) 25%, 
    rgba(15,22,33,.9) 50%, 
    rgba(15,22,33,.95) 100%);
  border: 1px solid rgba(99,164,255,.25); 
  border-radius: 16px; 
  padding: 16px; 
  box-shadow: var(--shadow);
  position: relative; 
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 300px;
  transition: all 0.3s ease;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tech-gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.card:hover::before {
  transform: scaleX(1);
}
.card:hover {
  background: linear-gradient(135deg, 
    rgba(59,245,161,.12) 0%, 
    rgba(99,164,255,.08) 25%, 
    rgba(15,22,33,.85) 50%, 
    rgba(15,22,33,.9) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(59,245,161,.3), inset 0 0 0 1px rgba(99,164,255,.2);
}

/* Интерактивные карточки */
.card {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:active {
  transform: translateY(0) scale(0.98);
}

.card.interactive {
  position: relative;
  overflow: hidden;
}

.card.interactive::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(99,164,255,.1) 50%, 
    transparent 100%);
  transition: left 0.6s ease;
}

.card.interactive:hover::before {
  left: 100%;
}

.card.interactive .card-content {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 300px;
}

.card.interactive .card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(59,245,161,.05);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card.interactive:hover .card-overlay {
  opacity: 1;
}

/* Восстанавливаем выравнивание для интерактивных карточек */
.card.interactive .card-content h3 {
  margin: 0 0 6px;
  flex-shrink: 0;
}

.card.interactive .card-content p {
  margin: 0 0 12px;
  flex-grow: 1;
  flex-shrink: 0;
}

.card.interactive .card-content .meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  min-height: 40px;
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
}

.card.interactive .card-content .progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  margin-top: auto !important;
  border: 1px solid rgba(99,164,255,.2);
  flex-shrink: 0;
  position: relative;
}

.card.interactive .card-content .progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(99,164,255,.1) 0%, 
    rgba(59,245,161,.1) 50%, 
    rgba(99,164,255,.1) 100%);
  border-radius: 999px;
}

.card.interactive .card-content .progress .bar {
  height: 100%;
  background: var(--tech-gradient);
  box-shadow: 0 0 12px rgba(99,164,255,.35);
  position: relative;
  z-index: 2;
  animation: progressGlow 2s ease-in-out infinite alternate;
}
.card:hover::after {
  background: linear-gradient(180deg, 
    rgba(99,164,255,.3) 0%, 
    rgba(99,164,255,.15) 30%, 
    rgba(99,164,255,.08) 60%, 
    transparent 100%);
}
.card::after{
  content:""; 
  position: absolute; 
  inset: auto -20% -30% -20%; 
  height: 60%; 
  background: linear-gradient(180deg, 
    rgba(99,164,255,.2) 0%, 
    rgba(99,164,255,.1) 30%, 
    rgba(99,164,255,.05) 60%, 
    transparent 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Карточки без псевдоэлемента для блока "О себе" */
.card.no-after::after {
  display: none;
}
.pill{ 
  font-size: 12px; 
  opacity: .9; 
  padding: 6px 8px; 
  border: 1px solid rgba(99,164,255,.25); 
  border-radius: 999px; 
  display: inline-block; 
  margin-bottom: 8px; 
  color: var(--muted); 
  white-space: nowrap; 
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99,164,255,.2), transparent);
  transition: left 0.5s;
}
.pill:hover::before {
  left: 100%;
}
.pill:hover {
  border-color: rgba(99,164,255,.5);
  color: var(--accent-2);
  transform: translateY(-1px);
}
.card h3{ 
  margin: 0 0 6px; 
  flex-shrink: 0;
}
.card p{ 
  margin: 0 0 12px; 
  flex-grow: 1; 
  flex-shrink: 0;
}
.meta{ 
  font-size: 13px; 
  color: var(--muted); 
  margin-bottom: 12px; 
  min-height: 40px; 
  display: flex !important; 
  align-items: center; 
  flex-shrink: 0;
}
.progress{
  height: 7px; 
  border-radius: 999px; 
  background: rgba(255,255,255,.06); 
  overflow: hidden; 
  margin-top: auto !important; 
  border: 1px solid rgba(99,164,255,.2);
  flex-shrink: 0;
  position: relative;
}
.progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(99,164,255,.1) 0%, 
    rgba(59,245,161,.1) 50%, 
    rgba(99,164,255,.1) 100%);
  border-radius: 999px;
}
.bar{ 
  height:100%; 
  width:62%; 
  background: var(--tech-gradient); 
  box-shadow:0 0 12px rgba(99,164,255,.35);
  position: relative;
  z-index: 2;
  animation: progressGlow 2s ease-in-out infinite alternate;
}
@keyframes progressGlow {
  0% { box-shadow: 0 0 12px rgba(99,164,255,.35); }
  100% { box-shadow: 0 0 20px rgba(59,245,161,.5); }
}

/* Навыки */
.skills-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0;
}
.skill-category{
  background: rgba(99,164,255,.05); border: 1px solid rgba(99,164,255,.2); border-radius: 12px; padding: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.skill-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tech-gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.skill-category:hover::before {
  transform: scaleX(1);
}
.skill-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,164,255,.2);
  border-color: rgba(99,164,255,.4);
}
.skill-category h4{ margin: 0 0 12px; color: var(--accent-2); font-size: 16px; }
.skill-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-item{
  background: rgba(59,245,161,.1); color: var(--accent); padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 500;
  border: 1px solid rgba(59,245,161,.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.skill-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59,245,161,.2), transparent);
  transition: left 0.4s;
}
.skill-item:hover::before {
  left: 100%;
}
.skill-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,245,161,.3);
  border-color: rgba(59,245,161,.5);
}

/* CTA и футер */
.cta{
  margin:36px 0 8px; display:flex; gap:12px; flex-wrap:wrap;
}
footer{
  border-top:1px solid rgba(99,164,255,.15);
  color:var(--muted);
  padding:30px 0 60px; margin-top:24px;
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(99,164,255,.3) 20%, 
    rgba(59,245,161,.5) 50%, 
    rgba(99,164,255,.3) 80%, 
    transparent 100%);
  border-radius: 1px;
}

/* Технологические иконки */
.tech-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: var(--tech-gradient);
  border-radius: 4px;
  position: relative;
  animation: techPulse 3s ease-in-out infinite;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tech-icon:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(59,245,161,.6);
}

/* Docker иконка */
.docker-icon::before {
  content: '🐳';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  animation: dockerFloat 2s ease-in-out infinite;
}

@keyframes dockerFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50% { transform: translate(-50%, -50%) translateY(-2px); }
}

/* Kubernetes иконка */
.kubernetes-icon::before {
  content: '☸️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  animation: k8sRotate 4s linear infinite;
}

@keyframes k8sRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* AWS иконка */
.aws-icon::before {
  content: '☁️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  animation: cloudFloat 3s ease-in-out infinite;
}

@keyframes cloudFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes techPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(180deg); }
}

/* Поддержка prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .panel, .skill-category, .skill-item, .pill, .tag { transition: none !important; }
  .cursor { animation: none }
  .particle, .logo-icon, .headline::after, .section h2::after, .progress::before { animation: none !important; }
  .btn::before, .tag::before, .pill::before, .skill-item::before, .panel::before, .card::before, .skill-category::before { display: none !important; }
}

/* Интерактивный терминал */
.term-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(0,0,0,.4);
  border-radius: 6px;
  border: 1px solid rgba(99,164,255,.2);
}

.term-prompt {
  color: var(--accent);
  font-weight: 600;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

.term-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 13px;
  outline: none;
}

.term-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.term-line {
  margin: 2px 0;
  padding: 1px 0;
}

.term-line.command-line {
  color: var(--accent-2);
  font-weight: 500;
}

.term-line.output-line {
  color: var(--text);
  margin-left: 8px;
}

.term-line.error-line {
  color: var(--danger);
  font-style: italic;
}

.term-line.input-line {
  color: var(--accent);
  margin-top: 8px;
}