/* ==========================================================================
   Collsta website — sticky navigation
   Light and glassy, never a full SaaS navbar. At rest it floats over the
   hero with no chrome at all; past the fold it condenses into a hairline
   glass bar (DS: "glassy nav & sticky headers, rgba(255,255,255,.72) +
   backdrop blur").
   ========================================================================== */

.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:height var(--dur-slow) var(--ease-out),
             background var(--dur-slow) var(--ease-out),
             border-color var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out);
}
.header.is-scrolled{
  height:var(--nav-h-compact);
  background:rgba(255,255,255,.72);
  border-bottom-color:var(--border);
  box-shadow:var(--shadow-sm);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .header.is-scrolled{
    background:rgba(255,255,255,.68);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
  }
}

.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-5);
  width:100%;
}

/* ---- Wordmark — mirrors components/brand/Logo.jsx ---- */
.logo{
  display:inline-flex;align-items:center;gap:9px;
  flex:none;
  transition:transform var(--dur-mid) var(--ease-out);
}
.logo:hover{transform:translateY(-1px)}
.logo__mark{width:32px;height:32px;flex:none}
.logo__word{
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:23px;
  letter-spacing:var(--ls-tight);
  line-height:1;
  color:var(--navy);
}

/* ---- Anchor links ---- */
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px)}
.nav__link{
  position:relative;
  font-family:var(--font-body);
  font-weight:var(--fw-medium);
  font-size:15px;
  color:var(--navy);
  padding-block:6px;
  transition:color var(--dur-fast) ease;
}
.nav__link::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1.5px;border-radius:2px;
  background:var(--grad-underline);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease-out);
}
.nav__link:hover,.nav__link:focus-visible{color:var(--purple-bright)}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1)}

/* ---- Right-hand cluster ---- */
.header__actions{display:flex;align-items:center;gap:12px;flex:none}

/* ---- Mobile toggle ---- */
.nav-toggle{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  color:var(--navy);
  flex:none;
}
.nav-toggle__bar{
  display:block;width:17px;height:1.8px;border-radius:2px;
  background:currentColor;
  transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-fast) ease;
}
.nav-toggle__bar + .nav-toggle__bar{margin-top:4.5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}

/* ---- Mobile panel ---- */
.nav-panel{
  position:fixed;
  inset:var(--nav-h) 0 auto 0;
  z-index:99;
  padding:var(--space-5) var(--shell-pad) var(--space-7);
  background:rgba(250,250,253,.94);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;
  transform:translate3d(0,-12px,0);
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out),
             visibility 0s linear var(--dur-mid);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav-panel{
    background:rgba(250,250,253,.86);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);
    backdrop-filter:blur(20px) saturate(1.3);
  }
}
.nav-panel.is-open{
  opacity:1;visibility:visible;transform:none;
  transition-delay:0s;
}
.nav-panel__link{
  padding:14px 4px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:20px;
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  border-bottom:1px solid var(--border);
}
.nav-panel__link:last-of-type{border-bottom:0}
.nav-panel__cta{margin-top:var(--space-4)}

/* ---- Breakpoints ---- */
@media (max-width:960px){
  .nav{display:none}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center}
}
@media (max-width:520px){
  .header__actions .btn--cta{display:none}
  .logo__word{font-size:21px}
  .logo__mark{width:29px;height:29px}
}
@media (min-width:961px){
  .nav-panel{display:none}
}