header a { text-decoration: none; }
.mobile-nav a:visited { color: #8c8c88; }

.hv-soft { transition: background .18s; }
.hv-soft:hover { background: #1a1a1a; }
.hv-dim-up { transition: color .16s; }
.hv-dim-up:hover { color: #f4f4ef; }

.burger-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.burger-btn { display: none; }
.mobile-nav { display: none; }

.lang-chev { flex-shrink: 0; transition: transform .2s cubic-bezier(.2,0,0,1); }
#langbtn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
#langlist { position: absolute; top: calc(100% + 8px); right: 0; min-width: 148px; display: flex;
  flex-direction: column; gap: 2px; padding: 5px; border-radius: 14px; background: #141414;
  box-shadow: 0 22px 40px -18px rgba(0,0,0,.9); z-index: 60;
  transition: opacity .18s, transform .18s;
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; }
#langlist[data-open="1"] { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
#langlist button { appearance: none; border: none; cursor: pointer; text-align: left; width: 100%;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: .03em;
  padding: 11px 13px; border-radius: 10px; background: transparent; color: #8c8c88;
  transition-property: background, color; transition-duration: .16s; }
#langlist button[aria-selected="true"] { background: #1f1f1f; color: #f4f4ef; }

.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  background: #e9b949; color: #1a1400; font-weight: 700; font-size: 14px;
  cursor: pointer; appearance: none; padding: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-wrap { position: relative; }
.user-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: #141414; border-radius: 14px;
  padding: 5px; min-width: 180px; z-index: 99; box-shadow: 0 22px 40px -18px rgba(0,0,0,.9);
}
.avatar-wrap.open .user-dropdown { display: block; }
.user-dropdown a, .user-dropdown .ddout {
  display: block; width: 100%; text-align: left; padding: 10px 13px; border-radius: 10px;
  color: #8c8c88; text-decoration: none; font-size: 13.5px; font-weight: 500;
  background: none; border: none; cursor: pointer; font-family: inherit; box-sizing: border-box;
}
.user-dropdown a:hover, .user-dropdown .ddout:hover { background: #1f1f1f; color: #f4f4ef; }
.user-dropdown .ddout { color: #c9877f; }

@media (max-width: 1080px) { #topbar { padding: 18px 32px !important; } }
@media (max-width: 760px) {
  #topbar { padding: 12px 20px !important; gap: 8px !important; flex-wrap: nowrap !important; }
  #topbar > div:last-child { gap: 8px !important; }
  #mainnav { display: none !important; }
  #topbar > a:first-child img { width: 28px !important; height: 28px !important; }
  #topbar > a:first-child span { font-size: 14px !important; }
  #topbar > div:last-child > a.login-btn { display: none !important; }

  .burger-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid transparent; background: rgba(10,10,10,.7);
    color: #f4f4ef; cursor: pointer; transition-property: background, border-color; transition-duration: .18s;
  }
  .burger-toggle:checked ~ #topbar .burger-btn { background: rgba(10,10,10,.85); }
  .burger-bar {
    position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) translateY(var(--y)) rotate(0deg);
    transition: transform .32s cubic-bezier(.2,0,0,1), opacity .2s ease;
  }
  .burger-bar:nth-child(1) { --y: -6px; }
  .burger-bar:nth-child(2) { --y: 0px; }
  .burger-bar:nth-child(3) { --y: 6px; }
  .burger-toggle:checked ~ #topbar .burger-btn .burger-bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
  .burger-toggle:checked ~ #topbar .burger-btn .burger-bar:nth-child(2) { opacity: 0; }
  .burger-toggle:checked ~ #topbar .burger-btn .burger-bar:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

  .mobile-nav {
    display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 20px;
    max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
    transform: translateY(-8px);
    background: #0a0a0a; border-bottom: 1px solid transparent;
    transition: max-height .32s cubic-bezier(.2,0,0,1), opacity .22s ease,
      transform .32s cubic-bezier(.2,0,0,1), padding .32s cubic-bezier(.2,0,0,1), border-color .32s ease;
  }
  .burger-toggle:checked ~ .mobile-nav {
    max-height: 240px; opacity: 1; pointer-events: auto; transform: none;
    padding: 6px 20px 14px; border-bottom-color: #1c1c1c;
  }
  .mobile-nav a {
    font-family: 'Geist Mono', ui-monospace, monospace; color: #8c8c88; font-size: 13.5px; letter-spacing: .02em;
    padding: 12px 6px; border-radius: 10px; transition: background .16s, color .16s;
  }
  .mobile-nav a:hover, .mobile-nav a:active { background: #141414; color: #f4f4ef; }
  .mobile-nav a.mobile-login {
    margin-top: 8px; padding: 12px 16px; color: #f4f4ef; background: #141414;
    border-radius: 12px; text-align: center;
  }
  .mobile-nav a.mobile-login:hover, .mobile-nav a.mobile-login:active { background: #1a1a1a; }
}
@media (prefers-reduced-motion: reduce) {
  .burger-bar, .mobile-nav { transition-duration: .001ms !important; }
}

footer.site { background: #0a0a0a; border-top: 1px solid #1c1c1c; margin-top: 64px; color: #605d57; font-size: 13px; }
footer.site a { color: #8c8c88; text-decoration: none; transition: color .16s; }
footer.site a:hover { color: #f4f4ef; }
.foot-in { max-width: 1560px; margin: 0 auto; padding: 40px 56px 28px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.foot-col h4 { margin: 0 0 10px; color: #605d57; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-col li { font-size: 13px; }
.foot-col p { margin: 0 0 10px; color: #605d57; font-size: 13px; }
.foot-brand { display: flex; align-items: center; gap: 8px; color: #8c8c88; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.foot-brand img { display: block; }
.foot-social { display: flex; gap: 8px; margin-top: 4px; }
.social-ic {
  width: 34px; height: 34px; border-radius: 10px; background: #141414;
  display: grid; place-items: center; color: #8c8c88; transition: background .16s, color .16s;
}
.social-ic:hover { color: #f4f4ef; background: #1a1a1a; }
.social-ic svg { width: 15px; height: 15px; }
.foot-bottom { padding-top: 16px; border-top: 1px solid #1c1c1c; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: .04em; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 1080px) { .foot-in { padding: 36px 32px 24px; } }
@media (max-width: 760px) { footer.site { margin-top: 48px; } .foot-in { padding: 32px 20px 22px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 22px; } }

@view-transition { navigation: auto; }
header { view-transition-name: topbar; }
::view-transition-old(root) { animation: vt-out .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.2,0,0,1) both; }
html[data-vt="back"]::view-transition-old(root) { animation-name: vt-out-back; }
html[data-vt="back"]::view-transition-new(root) { animation-name: vt-in-back; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateY(12px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateY(-16px); } }

html { scroll-behavior: smooth; }

html .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,0,0,1) var(--reveal-delay, 0ms), transform .6s cubic-bezier(.2,0,0,1) var(--reveal-delay, 0ms), border-color .2s, background .2s, color .2s; }
html .reveal.in { opacity: 1; transform: none; }

.mobile-nav a:active, #langbtn:active, .login-btn:active, .social-ic:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
  html .reveal { opacity: 1; transform: none; transition: none; }
}