NavFloatingPill Navigation

---
interface Props {
  brand?: string;
  cta?: string;
  moreLabel?: string;
  variant?: 'overlay' | 'solid';
}
const {
  brand = 'BLURR',
  cta = 'Plan gesprek',
  moreLabel = 'More',
  variant = 'solid',
} = Astro.props;
---
<nav class={`nfp nfp-${variant}`}>
  <button class="nfp-more">{moreLabel} <span aria-hidden="true">⋮</span></button>
  <div class="nfp-brand">
    <span class="nfp-logo">✻</span>
    <span>{brand}</span>
  </div>
  <a href="#cta" class="nfp-cta">{cta}</a>
</nav>

<style>
  .nfp {
    --ink: #131313;
    --white: #ffffff;
    --accent: #ecf86e;
    --pill: 999px;
    position: relative;
    margin: 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Inter', system-ui, sans-serif;
    z-index: 10;
  }
  .nfp-overlay { position: absolute; top: 0; left: 0; right: 0; margin-inline: 24px; }
  .nfp-more {
    background: rgba(0,0,0,0.06);
    color: var(--ink);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: var(--pill);
    padding: 12px 22px;
    font: inherit; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
  }
  .nfp-overlay .nfp-more {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    color: var(--white);
    border-color: rgba(255,255,255,0.25);
  }
  .nfp-brand {
    position: absolute; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--white);
    padding: 12px 28px; border-radius: var(--pill);
    display: flex; align-items: center; gap: 12px;
    font-weight: 500;
  }
  .nfp-logo { color: var(--accent); font-size: 18px; }
  .nfp-cta {
    background: var(--ink); color: var(--white);
    padding: 14px 26px; border-radius: var(--pill);
    text-decoration: none; font-weight: 500; font-size: 15px;
  }
  .nfp-overlay .nfp-cta { background: var(--white); color: var(--ink); }
  @media (max-width: 720px) {
    .nfp-brand { display: none; }
  }
</style>