/* ===== socials ===== */
.hero .socials {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
}

.hero .socials a {
  text-decoration: none;
  color: #e0e0e0;
  background: rgba(0,0,0,0.35);
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.hero .socials a:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.hero {
  position:relative;
  min-height:240px;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
}

/* фон */
.hero .bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}

/* переход по краям + мягкое затемнение низа (одним псевдоэлементом) */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  pointer-events:none;

  /* ДВА слоя: края и нижний фейд */
  background:
    /* 2) нижний фейд */
    linear-gradient(to top,
      rgba(0,0,0,.5) 1%,
      rgba(0,0,0,.5) 53%,
      rgba(0,0,0,.2) 54%,
      rgba(0,0,0,.2) 66%,
      rgba(0,0,0,.2) 100%) 0 100% / 100% 10px no-repeat,
    /* 1) края */
    linear-gradient(to right,
      var(--page-bg, transparent) 0%,
      transparent 15%,
      transparent 85%,
      var(--page-bg, transparent) 100%) 0 0 / 100% 100% no-repeat;
}

/* контент */
.hero .inner {
  position:relative; z-index:2;
  display:flex; gap:20px; align-items:center;
  padding:24px clamp(16px, 6vw, 48px);
  width:100%;
  padding-left:110px; /* небольшой отступ слева */
}

/* аватар */
.hero .avatar {
  width:184px; height:184px;
  border-radius:10px; object-fit:cover;
  background:#111;
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}

/* текст */
.hero .meta h1 {
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  margin: 0 0 8px;
}
.hero .meta .sub { opacity:.85; }

/* адаптив */
@media (max-width:720px){
  .hero .inner{flex-direction:column; align-items:flex-start}
  .hero .avatar{width:120px; height:120px}
}

/* Градиентное затемнение низа шапки */
.hero{
  position: relative;
  z-index: 0;
}

/* ===== NAV справа: столбик, зелёные кнопки, над затемнением ===== */
.hero .topnav{
  margin-left: auto;             /* прижать вправо во flex-контейнере .inner */
  display: flex;
  flex-direction: column;        /* ссылки в столбик */
  gap: 8px;
  align-self: flex-start;        /* к верхнему краю шапки */
  position: relative;
  z-index: 2;                    /* выше .hero::before (z-index:1) */
}

.hero .topnav a{
  display: inline-block;
  background: var(--accent);
  color: #051a32;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration: none;
  transition: background .2s, color .2s, transform .12s, box-shadow .12s;
}
.hero .topnav a:hover{
  background: #ff7a00;           /* ярко-оранжевый hover */
  color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Активный пункт (и через aria-current="page") */
.hero .topnav a.active,
.hero .topnav a[aria-current="page"]{
  background: #79d24c;           /* чуть ярче зелёный */
  color: #051a32;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
  cursor: default;
}
.hero .topnav a.active:hover,
.hero .topnav a[aria-current="page"]:hover{
  background: #79d24c;           /* не превращаем активную в оранжевую */
  color: #051a32;
  transform: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
}

/* Мобилки: растянуть по ширине, держать выравнивание вправо */
@media (max-width:720px){
  .hero .topnav{
    align-self: stretch;
    align-items: flex-end;
    margin-top: 8px;
  }
}

/* ===== Навигация справа в шапке ===== */
.hero .topnav {
  margin-left: auto;          /* прижать вправо */
  display: flex;
  flex-direction: column;     /* ссылки в столбик */
  gap: 8px;
  align-items: flex-end;      /* выравнивание текста справа */
  position: relative;
  z-index: 2;                 /* выше затемнения .hero::before */
}

.hero .topnav a {
  display: inline-block;
  background: var(--accent);
  color: #051a32;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration: none;
  transition: background .2s, color .2s, transform .12s, box-shadow .12s;
}

.hero .topnav a:hover {
  background: #ff7a00;      /* ярко-оранжевый hover */
  color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Активная страница */
.hero .topnav a.active,
.hero .topnav a[aria-current="page"] {
  background: #79d24c;      /* чуть светлее зелёный */
  color: #051a32;
  cursor: default;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
}
.hero .topnav a.active:hover,
.hero .topnav a[aria-current="page"]:hover {
  background: #79d24c;      /* не превращаем активную в оранжевую */
  color: #051a32;
  transform: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
}

/* Мобилки: растянуть по ширине, но держать выравнивание вправо */
@media (max-width:720px){
  .hero .topnav {
    align-self: stretch;
    align-items: flex-end;
    margin-top: 8px;
  }
}