/* =====================================================================
   09 · NAVBAR
   ===================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:transform .55s var(--ease), background-color .45s var(--ease),
             border-color .45s var(--ease), backdrop-filter .45s var(--ease),
             height .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  height:64px;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:1.5rem;
}

/* Logo */
.logo{
  display:inline-flex;align-items:center;gap:.65rem;
  font-weight:500;letter-spacing:-.02em;font-size:1rem;
  margin-right:auto;flex-shrink:0;
}
.logo__mark{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--text);
  position:relative;flex-shrink:0;
  transition:transform .6s var(--ease), border-color .4s;
}
.logo__mark::after{
  content:'';position:absolute;inset:5px;border-radius:50%;
  background:var(--accent);
  transform:scale(0);
  transition:transform .5s var(--ease);
}
.logo:hover .logo__mark{transform:rotate(180deg)}
.logo:hover .logo__mark::after{transform:scale(1)}
.logo__txt{white-space:nowrap}

/* Desktop links */
.nav__links{
  display:none;align-items:center;gap:.35rem;
}
@media (min-width:1080px){ .nav__links{display:flex} }

.nav__link{
  position:relative;
  padding:.55rem .9rem;
  font-size:.875rem;font-weight:400;
  color:var(--text-2);
  letter-spacing:-.01em;
  border-radius:99px;
  transition:color .35s var(--ease);
}
.nav__link::after{
  content:'';position:absolute;left:.9rem;right:.9rem;bottom:.3rem;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .5s var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:var(--text)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left center}

.nav__right{display:flex;align-items:center;gap:.6rem;flex-shrink:0}

/* Theme toggle */
.theme-toggle{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);
  display:grid;place-items:center;
  position:relative;overflow:hidden;
  color:var(--text-2);
  transition:border-color .4s, color .4s, transform .4s var(--ease);
}
.theme-toggle:hover{border-color:var(--line-3);color:var(--text);transform:rotate(35deg)}
.theme-toggle i{position:absolute;font-size:.9rem;transition:opacity .4s var(--ease),transform .5s var(--ease)}
[data-theme="dark"] .theme-toggle .fa-sun{opacity:1;transform:translateY(0)}
[data-theme="dark"] .theme-toggle .fa-moon{opacity:0;transform:translateY(140%)}
[data-theme="light"] .theme-toggle .fa-sun{opacity:0;transform:translateY(-140%)}
[data-theme="light"] .theme-toggle .fa-moon{opacity:1;transform:translateY(0)}

/* Nav CTA */
.nav__cta{display:none}
@media (min-width:1080px){ .nav__cta{display:inline-flex} }

/* Burger */
.burger{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);
  display:grid;place-items:center;gap:0;
  position:relative;flex-shrink:0;
  transition:border-color .4s;
}
.burger:hover{border-color:var(--line-3)}
@media (min-width:1080px){ .burger{display:none} }
.burger__box{width:17px;height:11px;position:relative}
.burger__box span{
  position:absolute;left:0;height:1.4px;width:100%;
  background:var(--text);border-radius:2px;
  transition:transform .5s var(--ease), opacity .3s ease, width .4s var(--ease);
}
.burger__box span:nth-child(1){top:0}
.burger__box span:nth-child(2){top:4.8px;width:70%}
.burger__box span:nth-child(3){top:9.6px}
.burger.is-open .burger__box span:nth-child(1){transform:translateY(4.8px) rotate(45deg)}
.burger.is-open .burger__box span:nth-child(2){opacity:0;width:0}
.burger.is-open .burger__box span:nth-child(3){transform:translateY(-4.8px) rotate(-45deg)}

/* =====================================================================
   10 · MOBILE MENU
   ===================================================================== */
.menu{
  position:fixed;inset:0;z-index:8999;
  background:var(--bg);
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + 1.5rem) var(--gutter) 2.5rem;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .8s var(--ease), visibility .8s;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__links{display:flex;flex-direction:column;margin-top:auto;margin-bottom:auto}
.menu__link{
  display:flex;align-items:baseline;gap:.9rem;
  padding:.7rem 0;
  font-size:clamp(2rem,9vw,3.2rem);
  font-weight:400;letter-spacing:-.04em;line-height:1;
  color:var(--text);
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(28px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s, padding-left .5s var(--ease);
}
.menu.is-open .menu__link{opacity:1;transform:translateY(0)}
.menu__link:hover{padding-left:.6rem;color:var(--accent)}
.menu__link span{font-size:.68rem;letter-spacing:.2em;color:var(--text-3);font-weight:500}
.menu__foot{
  display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:center;
  padding-top:1.8rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--text-2);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s .35s var(--ease),transform .5s .35s var(--ease);
}
.menu.is-open .menu__foot{opacity:1;transform:translateY(0)}
.menu__socials{display:flex;gap:.7rem;margin-left:auto}
.menu__socials a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:.85rem;color:var(--text-2);
  transition:.35s var(--ease);
}
.menu__socials a:hover{background:var(--text);color:var(--bg);border-color:var(--text)}