@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body{font-family:Inter,sans-serif;background:#0a1a0f;color:#ffffff;min-height:100vh;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(6,78,59,.3),transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(16,185,129,.2),transparent 50%),linear-gradient(135deg,#022c22 0%,#064e3b 25%,#0a1a0f 50%,#047857 75%,#065f46 100%);pointer-events:none;z-index:-5}
/* Премиум видео-фон с улучшенной читаемостью */
.video-bg-wrapper{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(135deg,#022c22 0%,#064e3b 25%,#0a1a0f 50%,#047857 75%,#065f46 100%);
}
.video-bg-premium{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  filter:brightness(0.7) contrast(1.2) saturate(1.1);
  animation:videoFadeIn 2s ease-out 0.5s forwards;
  will-change:opacity;
}
.video-overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,0.9) 100%);
  z-index:-1;
  pointer-events:none;
}
@keyframes videoFadeIn{
  0%{opacity:0;filter:brightness(0.3) contrast(1.1) saturate(1)}
  100%{opacity:1;filter:brightness(0.7) contrast(1.2) saturate(1.1)}
}
@media(max-width:768px){
  .video-bg-premium{
    position:fixed!important;
    top:50%!important;
    left:50%!important;
    opacity:0.32!important;
    filter:brightness(0.54) contrast(1.12) saturate(0.95)!important;
    object-fit:cover!important;
    object-position:65% center!important;
    width:auto!important;
    height:auto!important;
    min-width:100vw!important;
    min-height:100vh!important;
    transform:translate(-50%,-50%)!important;
    animation:none!important;
    transition:none!important;
  }
  .video-bg-wrapper{
    position:fixed!important;
    top:0!important;
    left:0!important;
    background:linear-gradient(135deg,#022c22 0%,#064e3b 50%,#0a1a0f 100%);
    overflow:hidden;
  }
  .video-overlay{
    position:fixed!important;
    background:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0.9) 100%);
  }
  
  /* Улучшенная мобильная типографика — КРУПНЕЕ */
  .hero{padding:60px 24px 40px}
  .hero h1{font-size:clamp(2.5rem,10vw,3.8rem)!important;line-height:1.3!important;margin-bottom:24px!important;background:linear-gradient(135deg,#fef3c7,#fbbf24,#f59e0b)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;animation:none!important;filter:drop-shadow(0 2px 8px rgba(251,191,36,0.6)) drop-shadow(0 4px 16px rgba(0,0,0,0.75))!important;text-shadow:none!important}
  .hero p{font-size:1.2rem;line-height:1.75;margin-bottom:32px;padding:0 10px;animation:none!important}
  .btn{animation:none!important;transition:none!important}
  *{animation:none!important;animation-duration:0s!important;transition:none!important;transition-duration:0s!important}
  section{animation:none!important;transition:none!important;opacity:1!important}
  
  /* Контейнер и отступы — РАСШИРЕНО */
  .container{padding:24px;max-width:100%;width:100%}
  body{overflow-x:hidden;position:relative;width:100vw}
  
  /* ШАПКА — ВСЁ В ОДНУ СТРОКУ */
  nav{
    padding:10px 12px!important;
    margin-bottom:18px;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    width:calc(100% - 24px);
    margin-left:12px;
    margin-right:12px;
    background:rgba(4,16,12,0.88)!important;
    backdrop-filter:blur(20px)!important;
    border:1px solid rgba(255,255,255,0.18)!important;
    border-radius:14px!important;
    box-shadow:0 5px 18px rgba(0,0,0,0.5)!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  nav::-webkit-scrollbar{display:none!important}
  nav a{
    font-size:0.92rem;
    padding:9px 15px;
    white-space:nowrap;
    border-radius:10px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    text-align:center;
    transition:all 0.2s ease;
    flex-shrink:0;
  }
  nav a:first-child{
    font-size:1.1rem;
    font-weight:700;
    letter-spacing:0.02em;
    background:linear-gradient(135deg,rgba(251,191,36,0.15),rgba(245,158,11,0.1));
    border:1.5px solid rgba(251,191,36,0.35);
    padding:9px 18px;
    border-radius:11px;
  }
  
  /* Секции - ШИРОКИЕ, БЕЗ ДЁРГАНИЯ, КРУПНЕЕ */
  section{margin-bottom:40px;padding:28px 22px;opacity:1!important;animation:none!important;transition:none!important;width:100%;max-width:92vw;margin-left:auto;margin-right:auto;position:relative}
  section p{font-size:1.15rem;line-height:1.75;letter-spacing:0.01em;margin-bottom:22px}
  h2{font-size:clamp(2.1rem,7vw,2.8rem);margin-bottom:26px;text-align:center;animation:none!important;position:relative}
  
  /* Карточки — КРУПНЕЕ */
  .card{padding:32px 26px;margin-bottom:24px;animation:none!important;transition:none!important;width:100%;box-sizing:border-box;background:rgba(4,16,12,0.72);border:1px solid rgba(255,255,255,0.2);box-shadow:0 12px 32px rgba(0,0,0,0.4);border-radius:16px;backdrop-filter:blur(16px)}
  .card h3{font-size:1.5rem;margin-bottom:18px;animation:none!important}
  .card p{font-size:1.12rem;line-height:1.78;animation:none!important}
  
  /* Статистика */
  .stats{grid-template-columns:repeat(2,1fr);gap:16px;margin:40px 0;padding:20px 0}
  .stat-card{padding:24px 20px}
  .stat-number{font-size:clamp(2rem,8vw,2.8rem)}
  .stat-label{font-size:1rem;line-height:1.4}
  
  /* Кнопки */
  .btn{padding:14px 32px;font-size:1rem;margin:8px 0;width:auto}
  
  /* Улучшенная читаемость текста на мобильных */
  .hero h1{text-shadow:0 4px 12px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.8),0 0 20px rgba(0,0,0,.6)}
  .hero p{text-shadow:0 3px 10px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.6)}
  h2{text-shadow:0 4px 12px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.8),0 0 16px rgba(0,0,0,.6)}
  .card h3{text-shadow:0 3px 8px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.65)}
  .stat-label{text-shadow:0 2px 6px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.8)}
  
  /* Улучшенные карточки */
  .card{background:rgba(0,0,0,0.62);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.18)}
  .stat-card{background:rgba(0,0,0,0.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.25)}
  
  /* Навигация */
  nav{background:rgba(0,0,0,0.75);backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,0.25)}
  
  /* Формы на мобильных */
  form{padding:32px 24px}
  form input,form textarea{font-size:16px}
  .contact-links{flex-direction:column;align-items:stretch}
  .contact-links a,.contact-links span{justify-content:center;text-align:center}
  .contact-placeholder{padding:30px 24px;border-radius:24px;margin:0 14px}
  .contact-placeholder p{font-size:1.02rem;margin-bottom:18px}
  
  /* Experience и About секции — ШИРОКИЕ И КРУПНЫЕ */
  #experience,#about{padding:50px 18px!important;width:100%;margin-bottom:56px!important}
  
  /* ОПЫТ — FLOATING CARD С ЗОЛОТЫМ GLOW */
  #experience{
    margin-top:60px!important;
    position:relative;
    z-index:10;
  }
  #experience::before{
    content:'';
    position:absolute;
    top:-20px;
    left:50%;
    transform:translateX(-50%);
    width:80%;
    height:4px;
    background:linear-gradient(90deg,transparent,rgba(251,191,36,0.6),transparent);
    border-radius:2px;
    box-shadow:0 0 20px rgba(251,191,36,0.8);
  }
  #experience h2{
    font-size:clamp(2.3rem,8vw,3.2rem)!important;
    margin-bottom:36px!important;
    background:linear-gradient(135deg,#fef3c7,#fbbf24,#f59e0b)!important;
    background-clip:text!important;
    -webkit-background-clip:text!important;
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    filter:drop-shadow(0 4px 16px rgba(251,191,36,0.9))!important;
    animation:pulse-glow 3s ease-in-out infinite;
  }
  @keyframes pulse-glow{
    0%,100%{filter:drop-shadow(0 4px 16px rgba(251,191,36,0.9))}
    50%{filter:drop-shadow(0 6px 24px rgba(251,191,36,1)) drop-shadow(0 0 40px rgba(251,191,36,0.6))}
  }
  #experience>div{
    padding:42px 30px!important;
    font-size:1.18rem!important;
    line-height:1.8!important;
    border-radius:22px!important;
    max-width:100%!important;
    width:100%!important;
    margin:0!important;
    animation:none!important;
    transition:none!important;
    box-sizing:border-box;
    background:rgba(4,16,12,0.88)!important;
    box-shadow:
      0 24px 60px rgba(0,0,0,0.65),
      0 0 0 2px rgba(251,191,36,0.3) inset,
      0 0 40px rgba(251,191,36,0.25)!important;
    border:2px solid rgba(251,191,36,0.45)!important;
    position:relative;
  }
  #experience p,#about p{font-size:1.16rem!important;line-height:1.78!important;text-shadow:0 2px 6px rgba(0,0,0,0.55),0 1px 3px rgba(0,0,0,0.45)!important}
  
  /* About — спокойнее */
  #about>div{
    padding:36px 26px!important;
    font-size:1.18rem!important;
    line-height:1.8!important;
    border-radius:20px!important;
    max-width:100%!important;
    width:100%!important;
    margin:0!important;
    animation:none!important;
    transition:none!important;
    box-sizing:border-box;
    background:rgba(4,16,12,0.78)!important;
    border:1px solid rgba(255,255,255,0.18)!important;
    box-shadow:0 16px 40px rgba(0,0,0,0.45)!important;
  }
  #experience ul{margin-left:18px;margin-bottom:16px}
  #experience li{margin-bottom:8px}
  #about p{margin-bottom:18px!important;line-height:1.7!important}
  #about strong{display:block;margin-bottom:8px;font-size:1rem}
  
  /* Grid адаптация */
  .grid{grid-template-columns:1fr;gap:24px}
}

@media(max-width:480px){
  .video-bg-premium{
    position:fixed!important;
    top:50%!important;
    left:50%!important;
    opacity:0.3!important;
    filter:brightness(0.52) contrast(1.12) saturate(0.92)!important;
    object-position:68% center!important;
    object-fit:cover!important;
    width:auto!important;
    height:auto!important;
    min-width:100vw!important;
    min-height:100vh!important;
    transform:translate(-50%,-50%)!important;
    animation:none!important;
    transition:none!important;
  }
  .video-bg-wrapper{
    position:fixed!important;
    top:0!important;
    left:0!important;
  }
  .video-overlay{
    position:fixed!important;
    background:linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.88) 100%);
  }
  
  /* Очень маленькие экраны */
  .hero{padding:40px 14px 24px;animation:none!important}
  .hero h1{font-size:clamp(1.8rem,7vw,2.5rem)!important;line-height:1.1!important;margin-bottom:12px!important;background:linear-gradient(135deg,#fef3c7,#fbbf24,#f59e0b)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;animation:none!important;filter:drop-shadow(0 2px 10px rgba(251,191,36,0.7)) drop-shadow(0 3px 16px rgba(0,0,0,0.9))!important;text-shadow:none!important;transform:none!important}
  .hero p{font-size:0.95rem;line-height:1.4;margin-bottom:20px;padding:0 6px;animation:none!important;transform:none!important}
  .btn{animation:none!important}
  
  .container{padding:14px}
  nav{padding:8px 10px;margin-bottom:20px;gap:8px}
  nav a{font-size:0.8rem;padding:6px 10px}
  nav a:first-child{font-size:1.05rem;margin-bottom:4px}
  
  section{margin-bottom:24px;padding:14px 10px;opacity:1!important;transform:none!important}
  h2{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:16px}
  
  .card{padding:20px 16px;margin-bottom:12px;animation:none!important}
  .card h3{font-size:1.2rem;margin-bottom:10px}
  .card p{font-size:0.95rem;line-height:1.5}
  
  .stats{grid-template-columns:1fr;gap:12px;margin:30px 0;padding:16px 0}
  .stat-card{padding:20px 16px}
  .stat-number{font-size:clamp(1.8rem,6vw,2.2rem)}
  .stat-label{font-size:0.9rem;line-height:1.3}
  
  .btn{padding:12px 28px;font-size:0.95rem;margin:8px 0;width:100%;max-width:280px}
  
  /* Ещё более сильные тени для маленьких экранов */
  .hero h1{text-shadow:0 6px 16px rgba(0,0,0,.95),0 3px 8px rgba(0,0,0,.9),0 0 24px rgba(0,0,0,.8)}
  .hero p{text-shadow:0 4px 12px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.8)}
  h2{text-shadow:0 5px 14px rgba(0,0,0,.95),0 3px 8px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.8)}
  .card h3{text-shadow:0 4px 10px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.8)}
  .stat-label{text-shadow:0 3px 8px rgba(0,0,0,.95),0 2px 4px rgba(0,0,0,.9)}
  
  /* Максимально контрастные карточки */
  .card{background:rgba(0,0,0,0.8);backdrop-filter:blur(25px);border:2px solid rgba(255,255,255,0.3)}
  .stat-card{background:rgba(0,0,0,0.8);backdrop-filter:blur(25px);border:2px solid rgba(255,255,255,0.3)}
  
  /* Навигация */
  nav{background:rgba(0,0,0,0.8);backdrop-filter:blur(30px);border:2px solid rgba(255,255,255,0.3);justify-content:center}
  
  /* Формы */
  form{padding:28px 20px}
  form input,form textarea{font-size:16px;padding:16px}
  
  /* Experience и About секции */
  #experience,#about{padding:0 6px!important}
  #experience>div,#about>div{
    padding:24px 20px!important;
    font-size:0.92rem!important;
    line-height:1.7!important;
    border-radius:20px!important;
    max-width:100%!important;
    margin:0 auto!important;
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  #experience ul{margin-left:16px;margin-bottom:12px}
  #experience li{margin-bottom:6px}
  #about p{margin-bottom:16px!important;line-height:1.7!important}
  #about strong{display:block;margin-bottom:6px;font-size:0.95rem}
  
  /* Навигация по центру */
  .contact-links a,.contact-links span{font-size:1rem;padding:14px 24px}
  .contact-placeholder{padding:26px 20px;border-radius:22px;margin:0 12px}
  .contact-placeholder p{font-size:0.96rem;margin-bottom:16px}
}

@keyframes pulse{50%{transform:scale(1.15)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
a{color:#6ee7b7;text-decoration:none;transition:.3s}
a:hover{color:#a7f3d0;text-shadow:0 0 8px #34d399}
.container{max-width:1400px;margin:0 auto;padding:32px;position:relative;z-index:1}
nav{display:flex;gap:32px;align-items:center;padding:16px 32px;margin-bottom:80px;backdrop-filter:blur(30px);background:rgba(6,78,59,.4);border:1px solid rgba(52,211,153,.3);border-radius:24px;position:sticky;top:16px;z-index:100;box-shadow:0 8px 32px rgba(16,185,129,.2);transition:all .4s cubic-bezier(.4,0,.2,1)}
nav.scrolled{padding:12px 28px;background:rgba(6,78,59,.6);box-shadow:0 12px 40px rgba(16,185,129,.3);border-color:rgba(16,185,129,.4)}
nav a{color:#86efac;font-weight:600;font-size:.95rem;transition:.3s;position:relative}
nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#10b981;transition:.3s;box-shadow:0 0 8px #10b981}
nav a:hover{color:#fff;text-shadow:0 0 8px #34d399}
nav a:hover::after{width:100%}
nav a:first-child{font-weight:900;font-size:1.4rem;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d97706);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-right:auto;filter:drop-shadow(0 0 12px rgba(251,191,36,.6))}
.hero{text-align:center;padding:140px 20px 100px;position:relative}
.hero h1{font-size:clamp(3rem,8vw,7rem);font-weight:900;line-height:1.05;background:linear-gradient(135deg,#ffffff,#f0f9ff,#e0f2fe,#0ea5e9,#0284c7);background-size:200% 200%;animation:gradientShift 8s ease infinite,fadeInUp .8s ease-out;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-bottom:28px;letter-spacing:-.04em;filter:drop-shadow(0 0 30px rgba(14,165,233,.7)) drop-shadow(0 6px 16px rgba(0,0,0,.95)) drop-shadow(0 2px 8px rgba(0,0,0,.9))}
.hero p{font-size:1.4rem;color:#ffffff;max-width:750px;margin:0 auto 48px;line-height:1.75;animation:fadeInUp 1s ease-out .2s both;text-shadow:0 6px 18px rgba(0,0,0,.95),0 3px 10px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.8)}
.hero::before{content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;background:radial-gradient(circle,rgba(16,185,129,.15),transparent 70%);transform:translate(-50%,-50%);pointer-events:none;animation:pulse 4s ease-in-out infinite}
.btn{display:inline-block;padding:18px 56px;background:linear-gradient(135deg,#dc2626,#b91c1c,#991b1b);color:#fff;border-radius:999px;font-weight:700;font-size:1.15rem;transition:.4s;border:0;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(220,38,38,.4);animation:fadeInUp 1.2s ease-out .4s both;text-shadow:0 2px 4px rgba(0,0,0,.2)}
.btn::before{content:'';position:absolute;inset:0 -100% 0 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:.6s}
.btn:hover::before{left:100%}
.btn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 28px 60px rgba(220,38,38,.6)}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
section{margin-bottom:120px;opacity:0;transform:translateY(30px);transition:opacity .8s ease-out,transform .8s ease-out}
section.visible{opacity:1;transform:translateY(0)}
h2{font-size:clamp(2.2rem,5vw,3.5rem);margin-bottom:56px;font-weight:900;color:#fbbf24;letter-spacing:-.03em;text-shadow:0 8px 20px rgba(0,0,0,.95),0 4px 12px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.8),0 0 24px rgba(251,191,36,.6);position:relative;display:inline-block}
h2::after{content:'';position:absolute;bottom:-12px;left:0;width:60%;height:4px;background:linear-gradient(90deg,#dc2626,transparent);border-radius:2px;box-shadow:0 0 12px rgba(220,38,38,.6)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:36px}
.card{background:rgba(4,16,13,.88);backdrop-filter:blur(26px);border:1px solid rgba(148,255,215,.18);border-radius:28px;padding:36px;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;animation:scaleIn .6s ease-out backwards;animation-delay:calc(var(--card-index, 0) * .1s);box-shadow:0 32px 70px rgba(0,0,0,.55)}
.card::before{content:'';position:absolute;inset:-60%;background:radial-gradient(circle,rgba(34,197,94,.22),transparent 70%);opacity:0;transition:.6s cubic-bezier(.4,0,.2,1)}
.card::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(16,185,129,.1),transparent);transition:left .8s}
.card:hover::before{opacity:1}
.card:hover::after{left:100%}
.card:hover{transform:translateY(-12px) scale(1.04);box-shadow:0 32px 80px rgba(16,185,129,.35),0 0 60px rgba(16,185,129,.2);border-color:rgba(16,185,129,.6)}
.card h3{color:#f8fafc;margin-bottom:18px;font-size:1.6rem;font-weight:800;text-shadow:0 4px 16px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.7);transition:.3s}
.card:hover h3{color:#6ee7b7;text-shadow:0 0 12px rgba(16,185,129,.6)}
.card img{border-radius:18px;margin-bottom:18px;width:100%;height:220px;object-fit:cover;transition:.5s;filter:brightness(.82)}
.card:hover img{transform:scale(1.08);filter:brightness(.95)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.tag{background:rgba(5,150,105,.5);backdrop-filter:blur(12px);border:1px solid rgba(16,185,129,.3);color:#a7f3d0;padding:7px 18px;border-radius:999px;font-size:.9rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.empty{text-align:center;color:#86efac;padding:100px 20px;font-size:1.2rem}
#experience>div{background:rgba(4,16,12,.88);backdrop-filter:blur(32px);border:1px solid rgba(52,211,153,.45);border-radius:36px;padding:68px 70px;max-width:1100px;margin:0 auto;line-height:1.95;font-size:1.08rem;box-shadow:0 55px 110px rgba(0,0,0,.65);position:relative;overflow:hidden}
#experience>div::before{content:'';position:absolute;inset:-45%;background:radial-gradient(circle at 30% 30%,rgba(16,185,129,.15),transparent 68%);opacity:.45;pointer-events:none}
#experience p{margin-bottom:22px;color:#ffffff;text-shadow:0 6px 18px rgba(0,0,0,.95),0 3px 10px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.8)}
#experience strong{color:#ffffff;font-weight:800;text-shadow:0 4px 14px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.9)}
#experience ul{margin:18px 0 28px 32px;color:#ffffff;list-style:none;text-shadow:0 5px 16px rgba(0,0,0,.95),0 3px 10px rgba(0,0,0,.9)}
#experience li{margin-bottom:12px;padding-left:30px;position:relative}
#experience li::before{content:'▸';position:absolute;left:0;color:#10b981;font-weight:900;font-size:1.2rem}
#about>div{background:rgba(4,16,12,.88);backdrop-filter:blur(32px);border:1px solid rgba(52,211,153,.45);border-radius:36px;padding:68px 70px;max-width:1100px;margin:0 auto;line-height:1.95;font-size:1.08rem;box-shadow:0 55px 110px rgba(0,0,0,.65)}
#about p{margin-bottom:22px;color:#ffffff;text-shadow:0 6px 18px rgba(0,0,0,.95),0 3px 10px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.8)}
#about strong{color:#6ee7b7;font-weight:800;text-shadow:0 4px 14px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.9)}
.contact-links{display:flex;gap:28px;justify-content:center;margin-bottom:48px;flex-wrap:wrap}
.contact-links a,.contact-links span{display:inline-flex;align-items:center;gap:14px;padding:18px 36px;background:rgba(6,78,59,.35);backdrop-filter:blur(25px);border:1px solid rgba(52,211,153,.25);border-radius:999px;font-weight:700;transition:.4s;font-size:1.1rem;color:#ecfdf5;text-shadow:0 3px 8px rgba(0,0,0,.7)}
.contact-links a:hover{background:rgba(16,185,129,.25);border-color:#10b981;transform:translateY(-3px) scale(1.05);box-shadow:0 12px 32px rgba(16,185,129,.3)}
.contact-placeholder{max-width:740px;margin:0 auto;background:rgba(6,78,59,.32);border:1px solid rgba(94,234,212,.28);border-radius:28px;padding:42px;text-align:center;line-height:1.75;color:#ecfdf5;backdrop-filter:blur(22px);box-shadow:0 22px 60px rgba(0,0,0,.36)}
.contact-placeholder p{margin-bottom:22px;font-size:1.08rem;text-shadow:0 3px 10px rgba(0,0,0,.8)}
form{max-width:750px;margin:0 auto;background:rgba(6,78,59,.35);backdrop-filter:blur(25px);border:1px solid rgba(52,211,153,.25);border-radius:28px;padding:56px}
form label{display:block;color:#ecfdf5;margin-bottom:14px;font-weight:700;font-size:1.05rem}
form input,form textarea{width:100%;padding:18px;border:1px solid rgba(52,211,153,.3);border-radius:18px;background:rgba(4,120,87,.25);backdrop-filter:blur(12px);color:#d1fae5;margin-bottom:26px;font-family:inherit;font-size:1.05rem;transition:all .4s cubic-bezier(.4,0,.2,1)}
form input::placeholder,form textarea::placeholder{color:#6ee7b7;opacity:.7;transition:.3s}
form input:focus,form textarea:focus{outline:0;border-color:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.2);background:rgba(4,120,87,.35);transform:translateY(-2px)}
form input:focus::placeholder,form textarea:focus::placeholder{opacity:.4}
form textarea{min-height:180px;resize:vertical}
form button{width:100%;font-size:1.25rem;padding:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin:80px 0;padding:60px 0}
.stat-card{text-align:center;padding:38px 30px;background:rgba(4,16,13,.88);backdrop-filter:blur(24px);border:1px solid rgba(148,255,215,.18);border-radius:26px;transition:.4s;box-shadow:0 28px 70px rgba(0,0,0,.55)}
.stat-card:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.4);box-shadow:0 32px 80px rgba(0,0,0,.6)}
.stat-number{font-size:3.6rem;font-weight:900;background:linear-gradient(135deg,#fbbf24,#f59e0b);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:12px;text-shadow:0 4px 16px rgba(0,0,0,.85)}
.stat-label{color:#f1f5f9;font-size:1.05rem;font-weight:600;text-shadow:0 3px 10px rgba(0,0,0,.85)}
.skills{display:flex;flex-wrap:wrap;gap:18px;margin:36px 0}
.skill{background:rgba(15,118,110,.55);backdrop-filter:blur(18px);border:1px solid rgba(94,234,212,.35);padding:14px 26px;border-radius:999px;color:#d1fae5;font-weight:600;font-size:1rem;transition:.3s;text-shadow:0 3px 8px rgba(0,0,0,.7)}
.skill:hover{background:rgba(45,212,191,.6);border-color:rgba(94,234,212,.6);transform:scale(1.08);box-shadow:0 6px 20px rgba(45,212,191,.35)}
.scroll-top{position:fixed;bottom:32px;right:32px;width:56px;height:56px;background:linear-gradient(135deg,#10b981,#059669);border:2px solid rgba(16,185,129,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:999;box-shadow:0 8px 24px rgba(16,185,129,.4)}
.scroll-top.visible{opacity:1;visibility:visible}
.scroll-top:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 12px 32px rgba(16,185,129,.6)}
.scroll-top::before{content:'↑';color:#fff;font-size:1.8rem;font-weight:900}
.loading{pointer-events:none;opacity:.6;position:relative}
.loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;transform:translate(-50%,-50%)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
footer{text-align:center;padding:70px 20px;color:#86efac;border-top:1px solid rgba(52,211,153,.2);margin-top:140px;font-size:1.05rem}
/* Карусель медиа (TikTok-стиль) */
.media-carousel{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  animation:fadeIn .3s ease-out;
}
.carousel-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
}
.carousel-content{
  position:relative;
  width:100%;
  height:100%;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.carousel-container{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.carousel-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  padding:20px;
}
.carousel-close{
  position:absolute;
  top:20px;
  right:20px;
  background:rgba(220,38,38,0.9);
  color:#fff;
  border:none;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
  font-weight:300;
  line-height:1;
  box-shadow:0 8px 24px rgba(220,38,38,0.5);
  z-index:10001;
}
.carousel-close:hover{
  background:rgba(220,38,38,1);
  transform:scale(1.1) rotate(90deg);
  box-shadow:0 12px 32px rgba(220,38,38,0.7);
}
.carousel-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(16,185,129,0.8);
  color:#fff;
  border:none;
  width:56px;
  height:56px;
  border-radius:50%;
  font-size:2.5rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
  font-weight:300;
  line-height:1;
  box-shadow:0 8px 24px rgba(16,185,129,0.4);
  z-index:10001;
}
.carousel-nav:hover{
  background:rgba(16,185,129,1);
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 12px 32px rgba(16,185,129,0.6);
}
.carousel-prev{left:20px}
.carousel-next{right:20px}
.carousel-indicator{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:10001;
}
.indicator-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
  cursor:pointer;
  transition:.3s;
  border:2px solid transparent;
}
.indicator-dot:hover{
  background:rgba(255,255,255,0.7);
  transform:scale(1.2);
}
.indicator-dot.active{
  background:#10b981;
  border-color:#6ee7b7;
  width:32px;
  border-radius:5px;
}
/* Hover для видео-превью */
.video-preview-wrapper:hover .video-preview{
  transform:scale(1.05);
  filter:brightness(1.1);
}
.video-preview-wrapper:hover .video-preview-overlay{
  background:rgba(0,0,0,0.5);
}
.video-preview{
  transition:.4s;
}
@media(max-width:768px){
  .carousel-nav{width:48px;height:48px;font-size:2rem}
  .carousel-prev{left:10px}
  .carousel-next{right:10px}
  .carousel-close{top:15px;right:15px;width:44px;height:44px;font-size:1.8rem}
  .carousel-indicator{bottom:20px;gap:8px}
  .indicator-dot{width:8px;height:8px}
  .indicator-dot.active{width:24px}
}