:root {
  --orange: #FF6B35;
  --orange-600: #E55100;
}

.topbar{
  background:#fafbfe;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.topbar .row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px 0;font-size:.95rem;
}
.ilist{display:flex;gap:20px;align-items:center}
.i{display:flex;align-items:center;gap:8px;opacity:.9}
.i svg{width:18px;height:18px}

.hdr{
  display:flex;justify-content:space-between;align-items:center;padding:14px 0;
  background: linear-gradient(180deg, #fafbfe 0%, #ffffff 100%);
}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  transition: transform .25s ease;
}
.brand:hover {
  transform: scale(1.02);
}
.brand img{height:80px;width:auto}
.quick{display:flex;align-items:center;gap:12px}

.nav{
  background:var(--ink);color:#fff;position:sticky;top:0;z-index:1100;
}
.nav .wrap,
.navbar{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
}

.nav a,
.nav-list a{
  color:#fff;text-decoration:none;padding:14px 6px;display:inline-block;position:relative;
  opacity:.95;transition:all .25s ease;
}
.nav a:hover,
.nav-list a:hover{
  opacity:1;
}

.nav a::after,
.nav-list a::after{
  content:"";position:absolute;left:6px;right:6px;bottom:8px;height:3px;
  border-radius:3px;background:transparent;transition:background .25s ease;
}
.nav a:is(:hover,.active)::after,
.nav-list a:is(:hover,.active)::after{
  background:var(--orange);
}

.nav-list{
  display:flex;gap:24px;margin:0;padding:0;list-style:none;
}

.burger{
  display:none;width:42px;height:42px;
  border:2px solid var(--orange);
  border-radius:10px;background:transparent;color:var(--orange);
  cursor:pointer;transition:all .2s cubic-bezier(.2,.8,.2,1);
}
.burger:hover{
  background:var(--orange);
  color:#fff;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255,107,53,0.28);
}
.burger:focus{
  outline:3px solid var(--orange);
  outline-offset:2px;
}

.nav-panel {
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (max-width: 900px) {
  .burger { display: grid; place-items: center; }
  .nav-panel {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--ink);
    border-top: 1px solid rgba(255,255,255,.1);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 12px;
    display: none;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    z-index: 1120;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }
  .nav.open .nav-panel {
    display: flex;
  }
  
  .nav-list {
    flex-direction: column;
    gap: 0;
  }
  .nav-list a {
    padding: 14px 12px;
    display: block;
    border-radius: 10px;
    transition: all .25s ease;
  }
  .nav-list a:hover,
  .nav-list a.active {
    background: linear-gradient(135deg, var(--orange), #FF8C42);
    color: #fff;
  }
  .nav a::after {
    display: none;
  }
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1050;
}
.nav.open ~ .nav-backdrop,
.nav.open + .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}
body.menu-open {
  overflow: hidden;
}

footer{
  background:var(--ink);color:#e8eefc;margin-top:60px;padding:32px 0;
}
footer .wrap{display:grid;gap:6px;padding:18px}
.copy{opacity:.9}

/* Адаптив лого */
@media (max-width:480px){
  .brand img{height:48px}
}