/* NAVBAR — site navigation, floating pill scroll state, mobile menu toggle */

/* NAV — outer .nav is a full-bleed, invisible flex-centering shell so
   position:fixed descendants (the mobile dropdown) keep the viewport as
   their containing block; .nav-bar carries all visible chrome and is
   what actually morphs into the floating pill on scroll. */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:center;
  padding:0 20px;
  pointer-events:none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.nav-hidden {
  transform: translateY(-120%);
}

/* true three-column layout: logo | nav links | CTA, with two equal-width
   outer tracks so the whitespace on both sides of the centered nav links
   is symmetric regardless of how wide the logo or CTA happen to be */
.nav-bar {
  pointer-events:auto;
  width:100%; max-width:2000px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:20px;
  padding:16px 32px;
  margin-top:0;
  border-radius:0;
  background:rgba(253,249,246,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid transparent;
  box-shadow:0 0 0 0 rgba(12,16,32,0);
  /* a symmetric ease-in-out (rather than an ease-out-heavy curve) so the
     pill glides back to the top bar with the same weighted, gradual feel
     it forms with — an asymmetric curve looks fine forming but reads as
     an abrupt snap in reverse, since most of the motion front-loads */
  transition:
    max-width .62s cubic-bezier(.65,0,.35,1),
    padding .62s cubic-bezier(.65,0,.35,1),
    border-radius .62s cubic-bezier(.65,0,.35,1),
    margin-top .62s cubic-bezier(.65,0,.35,1),
    background .56s cubic-bezier(.65,0,.35,1),
    border-color .56s cubic-bezier(.65,0,.35,1),
    box-shadow .62s cubic-bezier(.65,0,.35,1),
    backdrop-filter .56s cubic-bezier(.65,0,.35,1);
}
.nav.scrolled .nav-bar {
  max-width:1000px;
  margin-top:14px;
  padding:11px 26px;
  border-radius:999px;
  border-color:rgba(12,16,32,.08);
  box-shadow:0 16px 40px rgba(12,16,32,.14), 0 2px 10px rgba(12,16,32,.05);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
}

/* homepage hero — the nav starts fully transparent so the hero's own
   background (gradients, dots, orbit rings) reads straight through with
   no blur/opacity seam; the moment it scrolls, the universal pill rule
   above (higher specificity) takes back over */
body.home .nav-bar {
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:transparent;
}

.logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; justify-self:start; }
.logo-img { display:block; height:48px; width:auto; transition:height .56s cubic-bezier(.65,0,.35,1); }
.nav.scrolled .logo-img { height:40px; }
.footer-brand .logo-img { height:56px; }

.nav-links {
  display:flex; align-items:center; gap:32px; list-style:none;
  justify-self:center;
}
.nav-links a {
  display:inline-block; text-decoration:none; color:var(--muted);
  font-size:.88rem; font-weight:500; padding:4px 1px;
  transition:color .3s var(--ease), transform .35s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:50%; right:50%;
  height:2px; background:var(--yellow); border-radius:2px;
  transition:left .4s cubic-bezier(.22,1,.36,1), right .4s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover, .nav-links a.active { color:var(--ink); }
.nav-links a:hover { transform:translateY(-1px); }
.nav-links a:hover::after, .nav-links a.active::after { left:0; right:0; }

.nav-actions { display:flex; align-items:center; justify-self:end; }
.nav-cta-item-mobile { display:none; }
.nav-cta { font-size:.82rem; padding:11px 20px; white-space:nowrap; }
.nav-cta, .nav-cta:hover {
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s var(--ease), background .3s var(--ease);
}
.btn.nav-cta:hover { transform:scale(1.03); }
.nav-cta .btn-arrow { display:inline-block; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.btn.nav-cta:hover .btn-arrow { transform:translateX(4px); }

.menu-toggle {
  display:none; background:none; border:none; cursor:pointer;
  width:40px; height:40px; flex-direction:column; align-items:center; justify-content:center;
  justify-self:end; grid-column:3;
}
.menu-toggle span {
  display:block; width:22px; height:2px; background:var(--ink);
  margin:3px 0; transition:transform .3s, opacity .3s;
}
/* translateY distance must equal the center-to-center gap between spans
   (line height 2px + 3px margin top/bottom on each = 8px) so both
   diagonal strokes pivot onto the same point and form a true X instead
   of two arms crossing off-center. */
.menu-toggle.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }