.nav{
  --nav-t: 0;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding: calc(8px * var(--nav-t)) 0;
  height: var(--nav-h);
  overflow: visible;
}

/* iOS‑like blur veil behind the navbar.
   Один слой + мягкая маска => без «мерзкой полосы» на границе. */
.nav-blur{
  position:absolute;
  left:0;
  right:0;
  top:0;
  /* Больше высота => растворение как в iOS Settings */
  height: calc(var(--nav-h) + (140px - 70px * var(--nav-t)));
  pointer-events:none;
  z-index:0;

  /*
    Слой состоит из:
    1) мягкой тени у верхней кромки
    2) лёгкого затемнения + растворения вниз
    Всё в одном background, чтобы не ловить «швы» между слоями.
  */
  background:
    radial-gradient(1200px 220px at 50% 0%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,0) 78%),
    linear-gradient(
      to bottom,
      rgba(10,10,10,.30) 0%,
      rgba(10,10,10,.20) 18%,
      rgba(10,10,10,.12) 40%,
      rgba(10,10,10,.06) 62%,
      rgba(10,10,10,0) 100%
    );

  /* Блюр слабый, явный только сверху */
  -webkit-backdrop-filter: blur(7px) saturate(140%);
  backdrop-filter: blur(7px) saturate(140%);

  /* Очень плавная маска (без резкой границы => нет полосы) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.98) 16%,
    rgba(0,0,0,.88) 34%,
    rgba(0,0,0,.62) 54%,
    rgba(0,0,0,.28) 74%,
    rgba(0,0,0,.10) 86%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.98) 16%,
    rgba(0,0,0,.88) 34%,
    rgba(0,0,0,.62) 54%,
    rgba(0,0,0,.28) 74%,
    rgba(0,0,0,.10) 86%,
    rgba(0,0,0,0) 100%
  );

  /* анти‑артефакты композитинга (особенно Safari/iOS) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  outline: 1px solid transparent;
}
/* “Контейнер” шапки — всегда центрирован и одной ширины.
   Благодаря этому исчезает дёрганье/кривизна при переходе в остров. */
.nav-shell{
  position: relative;
  z-index: 1;
  width: min(var(--container), calc(100% - 16px));
  margin: 0 auto;
  transform: translateY(0);
  transition:
    transform var(--transition-med),
    filter var(--transition-med);
  will-change: transform;
  filter: drop-shadow(0 12px 44px rgba(0,0,0, calc(.22 * (1 - var(--nav-t)))));
}

/* Внутренности */
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  /* Морф */
  padding: calc(12px - 2px * var(--nav-t)) 16px;
  min-height: var(--nav-h);
  /* В полном состоянии чуть скруглён, в «острове» -> pill */
  border-radius: calc(22px + (999px - 22px) * var(--nav-t));
  border:1px solid rgba(255,255,255, calc(.14 * var(--nav-t)));
  background: rgba(5,5,5, calc(.92 * var(--nav-t)));
  -webkit-backdrop-filter: blur(calc(18px * var(--nav-t))) saturate(140%);
  backdrop-filter: blur(calc(18px * var(--nav-t))) saturate(140%);
  box-shadow: 0 14px 50px rgba(0,0,0, calc(.65 * var(--nav-t)));
  /* Значения меняются через CSS-переменную --nav-t каждый кадр,
     поэтому transitions здесь дают «двойной easing» и кривой морф. */
  transition: none;
  will-change: padding, border-radius, background, box-shadow, -webkit-backdrop-filter, backdrop-filter;
}


/* Островковое состояние */
.nav.scrolled{}
.nav.scrolled .nav-shell{
  transform: translateY(0);
}

/* Left */
.nav-left{display:flex; align-items:center; gap:16px; min-width:0; flex:1 1 auto}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:900; letter-spacing:.02em;
  min-width: 0;
}
.brand-text{min-width:0}
.brand-title{font-size:14px; color:rgba(255,255,255,.82); line-height:1}
.brand-sub{font-size:12px; color:rgba(255,255,255,.55); line-height:1.1; margin-top:4px}

.brand .logo{
  width:40px; height:40px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(12px 12px at 30% 35%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,140,0,.35), rgba(255,69,0,.15));
  box-shadow: 0 12px 40px rgba(255,110,0,.18);
  display:grid; place-items:center;
  position:relative;
  overflow:hidden;
  flex: 0 0 auto;
}
.brand .logo:before{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.18), transparent 35%),
              radial-gradient(circle at 70% 60%, rgba(255,255,255,.10), transparent 35%);
  transform: rotate(18deg);
  opacity:.9;
}
.brand .logo span{
  position:relative;
  font-size:20px;
}

.nav-divider{
  width:1px; height:22px;
  background: rgba(255,255,255,.10);
  border-radius:999px;
  display:block;
}

/* Links + indicator */
.nav-links{
  position:relative;
  display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.78);
  font-weight:700;
  font-size:14px;
  /* Выравниваем высоту с CTA-кнопками, чтобы ничего «не съезжало» */
  height: 44px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  flex:0 1 auto;
  isolation: isolate;
}
.nav-indicator{
  position:absolute;
  top:4px;
  bottom:4px;
  left:0;
  width: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transform: translateX(0);
  transition: transform var(--transition-med), width var(--transition-med), opacity var(--transition-fast);
  opacity: 0;
  z-index:0;
}
.nav-links a{
  position:relative;
  z-index:1;
  height: 36px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  white-space:nowrap;
  line-height: 1;
}
.nav-links a:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
  transform: translateY(-1px);
}
.nav-links a.active{
  color:#fff;
}
.nav-links a.active:after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  opacity:.95;
}



/* Special: Crabland Music link (external) */
.nav-link.nav-music{
  gap:8px;
  padding:0 14px;
  border:1px solid rgba(255,140,0,.22);
  background:
    radial-gradient(18px 18px at 18% 35%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(90deg, rgba(255,140,0,.18), rgba(255,69,0,.10));
  box-shadow:
    0 12px 34px rgba(255,110,0,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-link.nav-music:hover{
  background:
    radial-gradient(18px 18px at 18% 35%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(90deg, rgba(255,140,0,.24), rgba(255,69,0,.14));
  border-color: rgba(255,140,0,.30);
  transform: translateY(-1px);
}
.nav-link.nav-music svg.lucide{
  width:18px;
  height:18px;
}
.nav-link.nav-music span{
  font-weight:900;
  letter-spacing:.01em;
}

/* Mobile version of Music link */
.mobile a.m-music{
  border-color: rgba(255,140,0,.22);
  background:
    radial-gradient(18px 18px at 12% 35%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(90deg, rgba(255,140,0,.14), rgba(255,69,0,.08));
}
.mobile a.m-music:hover{
  background:
    radial-gradient(18px 18px at 12% 35%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(90deg, rgba(255,140,0,.20), rgba(255,69,0,.10));
  border-color: rgba(255,140,0,.32);
}
/* CTA */
.nav-cta{
  display:flex;
  gap:10px;
  align-items:center;
  flex:0 0 auto;
}

/* Фиксируем геометрию CTA, чтобы кнопки не «плавали» относительно меню */
.nav-cta .btn{
  height: 44px;
  padding: 0 14px;
  line-height: 1;
}

/* Размеры иконок в шапке — иначе lucide по умолчанию 24px и ломает центровку */
.nav-cta svg.lucide{width:18px; height:18px;}
.burger svg.lucide{width:20px; height:20px;}
.mobile svg.lucide{width:18px; height:18px;}
.chev svg.lucide, .faq-q svg.lucide{width:20px; height:20px;}

/* Burger */
.burger{
  display:none;
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  color:#fff;
  place-items:center;
  transition: transform var(--transition-fast), background var(--transition-fast), border var(--transition-fast);
}
.burger:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22);}

/* Mobile menu: плавное раскрытие через max-height + opacity + translate */


.mobile{
  display:block;
  margin-top: 8px;
  padding: 0 16px 12px 16px;
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background-color: rgba(5,5,5,.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-soft);

  transition: max-height var(--transition-med),
              opacity var(--transition-fast),
              transform var(--transition-fast);
  will-change: max-height, opacity, transform;
}


.mobile[data-open="true"]{
  max-height: var(--mobile-h, 520px);
  opacity: 1;
  transform: translateY(0);
}
.mobile a{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  margin-top:8px;
  color: rgba(255,255,255,.92);
  font-weight:900;
  transition: background var(--transition-fast), border var(--transition-fast), transform var(--transition-fast);
}
.mobile a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.mobile a.active{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Breakpoints */
@media (max-width: 980px){
  .hide-sm{display:none}
  .nav-links{display:none}
  .burger{display:grid}
  .nav-divider{display:none}
  .nav.scrolled .nav-inner{border-radius: 22px;}
  .nav-inner{row-gap:6px;}
  .nav-cta{margin-left:auto}
}

@media (max-width: 640px){
  .nav-inner{flex-wrap:nowrap; gap:8px;}
  .brand{flex:1 1 auto;}
  .brand-sub{display:none}
  .brand .logo{width:36px;height:36px;border-radius:12px;}
  .nav-left{gap:10px;}
  .nav-cta{gap:6px;}
  .btn{padding:8px 10px; font-size:13px;}
  .pill{font-size:12px;}
  .mobile{padding: 0 12px 12px 12px;}
}


/* Fix baseline/scale issues for icons inside nav */
.nav-cta svg,
.nav-cta i,
.nav-left svg,
.faq-q svg,
.chev{
  flex: 0 0 auto;
}

@media (max-width: 420px){
  .nav-shell{width: calc(100% - 12px);}
  .nav-cta .btn{padding:0 12px; height:42px; border-radius:14px;}
  .burger{width:40px; height:40px; border-radius:14px;}
  .brand-title{font-size:13px;}
}