:root{
  --bg: #0E0E0F; /* основной фон — глубокий графит */
  --section: #161617; /* фон секций */
  --subsection: #1E1E1F; /* подсекции и блоки */
  --card: #242425; /* фон карточек */
  --card-2: #2C2C2D; /* вторичный фон карточек */
  --border: #3A3A3B; /* бордеры, разделители */
  --heading: #FFFFFF; /* крупные заголовки */
  --text: #E6E6E6; /* основной текст */
  --muted: #B5B5B5; /* второстепенный текст */
  --muted-weak: #8A8A8A; /* слабые подписи / метки */
  --accent: #686868; /* основной акцент */
  --accent-hover: #7D7D7D; /* hover-акцент */
  --accent-active: #4A4A4A; /* темный активный элемент */
  --glow-light: rgba(180,180,180,0.2); /* светлое свечение */
  --glow-lighter: rgba(200,200,200,0.15); /* ещё светлее */
  --shadow: 0 8px 24px rgba(0,0,0,0.6);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  scroll-behavior:smooth;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--bg);
  z-index:-2;
}

video#bg-video{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
  opacity:0.5;
  filter:brightness(1.3) contrast(1.1);
}

.container{
  width:85%;
  max-width:1200px;
  margin:32px auto;
  padding:0 20px;
}

.header-inner{
  background:var(--section);
  border-radius:20px;
  padding:24px 32px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 16px 32px rgba(0,0,0,0.5);
}

.main-content{
  margin-top:28px;
}

.main-content .card{
  border-radius:18px;
  box-shadow:0 12px 36px rgba(0,0,0,0.6);
}

.site-header{padding:40px 0 32px;background:transparent;border:none;box-shadow:none}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
.header-content{flex:1;min-width:280px}
.title{margin:0;font-weight:700;font-size:18px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;animation:header-fade .6s ease-out}
.title-name{margin:4px 0 0;font-weight:800;font-size:28px;color:var(--heading);background:linear-gradient(135deg, #ffffff, #d0d0d0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:header-fade .7s ease-out .1s backwards}
.subtitle{margin:10px 0 0;color:var(--muted);font-size:13px;letter-spacing:0.02em;animation:header-fade .7s ease-out .2s backwards}

@keyframes header-fade{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

.contacts{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:fit-content;
}

.contact-link{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition:all .3s cubic-bezier(.34,.1,.68,.55);
  padding:8px 12px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  white-space:nowrap;
}

.contact-link:hover{
  color:var(--heading);
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.1);
  transform:translateY(-2px);
}

.email-link:hover{background:rgba(230,100,100,0.2);border-color:rgba(230,100,100,0.3)}
.telegram-link:hover{background:rgba(100,150,220,0.2);border-color:rgba(100,150,220,0.3)}
.github-link:hover{background:rgba(180,180,180,0.2);border-color:rgba(180,180,180,0.3)}

.main-content{
  margin-top:32px;
  margin-bottom:80px;
  position:relative;
  z-index:1;
}

.card{
  background:var(--card);
  padding:24px;
  border-radius:18px;
  box-shadow:0 12px 36px rgba(0,0,0,0.6);
  margin-bottom:20px;
  transform:translateY(12px);
  transition:transform .28s cubic-bezier(.34,.1,.68,.55),opacity .28s ease,box-shadow .5s cubic-bezier(.34,.1,.68,.55),border-color .5s cubic-bezier(.34,.1,.68,.55);
  opacity:0;
  border:1px solid rgba(255,255,255,0.04);
  position:relative;
  background-image:linear-gradient(135deg, rgba(200,200,200,0.02) 0%, rgba(180,180,180,0.01) 100%);
}
.card.visible{transform:none;opacity:1}
.card h2{margin:0 0 10px;font-size:16px;color:var(--heading);transition:color .3s ease}

.stack-list, .experience-list{list-style:none;padding:0;margin:0}
.stack-list li, .experience-list li{padding:8px 0;border-top:1px dashed var(--border)}
.stack-list li:first-child, .experience-list li:first-child{border-top:0;padding-top:0}

.contacts-list{list-style:none;padding:0;margin:0}
.contacts-list li{padding:6px 0}
.contacts-list a{color:var(--accent);text-decoration:none}
.contacts-list a:hover{color:var(--accent-hover);text-decoration:underline}


.card:hover{
  transform:translateY(-8px) scale(1.005);
  box-shadow:0 0 40px rgba(180,180,180,0.3), 0 30px 60px rgba(150,150,150,0.25), inset 0 0 0 1px rgba(200,200,200,0.1);
  border-color:rgba(255,255,255,0.04);
}


@media (max-width:700px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .contacts{margin-top:10px}
}

/* Reveal animation */
.reveal{will-change:transform,opacity}
.reveal{transform:translateY(20px);opacity:0}
.reveal.visible{transform:none;opacity:1;transition:opacity .3s ease,transform .3s cubic-bezier(.34,.1,.68,.55)}

/* Accent link style */
a{color:var(--accent);transition:color .25s ease}
a:hover{color:var(--accent-hover)}

strong{font-weight:700;color:var(--heading);transition:color .25s ease}

.card:hover strong{color:#ffffff}

@media (prefers-reduced-motion: reduce){
  .card, .reveal{transition:none !important}
}