/* ==========================================================================
   PULSAR public nav — self-contained, scoped copy of the landing-page header.
   Everything is namespaced under .ppnav so it can load alongside sfz-system.css
   on the shell pages without leaking globals into page content. Tokens are
   defined on .ppnav (no dependency on pulsar.css :root).
   ========================================================================== */
.ppnav {
    --white: #ffffff;
    --paper-2: #eef1f5;
    --ink: #0a0c10;
    --lead: #1d52cf;
    --body: #48546a;
    --muted: #6b7789;
    --muted-2: #8b96a8;
    --blue: #2563eb;
    --blue-strong: #1d52cf;
    --navy-deep: #061631;
    --line: #e3e7ee;
    --line-strong: #d3dae4;
    --r-sm: 12px;
    --r-lg: 24px;
    --header-h: 72px;
    --container: 1240px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-sm: 0 1px 2px rgba(10, 22, 45, 0.04), 0 2px 8px rgba(10, 22, 45, 0.04);
    --shadow: 0 2px 4px rgba(10, 22, 45, 0.04), 0 12px 32px rgba(10, 22, 45, 0.07);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ppnav *, .ppnav *::before, .ppnav *::after { box-sizing: border-box; }

.ppnav .skip-link {
    position: fixed;
    top: -60px;
    left: 12px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--ink);
    color: #fff;
    border-radius: 8px;
    font-size: .9rem;
    transition: top .2s var(--ease);
}
.ppnav .skip-link:focus { top: 12px; }

/* ---- Buttons (scoped to the nav) ------------------------------------- */
.ppnav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 42px;
    padding-inline: 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.008em;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .18s var(--ease), color .18s var(--ease),
        border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ppnav .btn:active { transform: translateY(1px); }
.ppnav .btn svg { flex: none; transition: transform .22s var(--ease); }
.ppnav .btn:hover svg.arrow { transform: translateX(3px); }
.ppnav .btn--primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.ppnav .btn--primary:hover { background: var(--lead); box-shadow: var(--shadow); }
.ppnav .btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.ppnav .btn--ghost:hover { border-color: var(--ink); background: var(--white); }
.ppnav .btn--light { background: #fff; color: var(--ink); }
.ppnav .btn--light:hover { background: #e9eefb; }

/* ---- Header (sticky + solid; occupies flow so page content sits below) - */
.ppnav .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line);
    transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ppnav .site-header.is-scrolled {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 26px rgba(15, 43, 91, .08);
}

.ppnav .header-inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ppnav .brand { display: inline-flex; align-items: center; gap: 11px; flex: none; margin-right: 8px; text-decoration: none; }
.ppnav .brand-mark { width: 30px; height: 30px; object-fit: contain; transition: transform .5s var(--ease-out); }
.ppnav .brand:hover .brand-mark { transform: rotate(90deg); }
.ppnav .brand-name { font-size: 1.02rem; font-weight: 700; letter-spacing: .19em; color: var(--ink); }

.ppnav .nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.ppnav .nav-item { position: static; }
.ppnav .nav-trigger, .ppnav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding-inline: 14px;
    border: 0;
    background: none;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s var(--ease), color .3s var(--ease), opacity .18s;
}
.ppnav .nav-trigger:hover, .ppnav .nav-link:hover, .ppnav .nav-item.is-open .nav-trigger { background: rgba(10, 12, 16, .06); }
.ppnav .nav-trigger .chev { transition: transform .26s var(--ease); opacity: .55; }
.ppnav .nav-item.is-open .nav-trigger .chev { transform: rotate(180deg); }

.ppnav .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ppnav .desktop-only { display: inline-flex; }
.ppnav .nav-link.desktop-only { color: var(--ink); }

/* ---- Mega dropdown ---------------------------------------------------- */
.ppnav .mega {
    position: absolute;
    top: calc(var(--header-h) - 6px);
    left: 0;
    right: 0;
    z-index: 99;
    padding-inline: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .26s var(--ease), transform .32s var(--ease-out), visibility 0s linear .3s;
    pointer-events: none;
}
.ppnav .nav-item.is-open .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .26s var(--ease), transform .38s var(--ease-out), visibility 0s;
}
.ppnav .mega-inner {
    max-width: var(--container);
    margin-inline: auto;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(190%) blur(44px);
    -webkit-backdrop-filter: saturate(190%) blur(44px);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--r-lg);
    box-shadow: 0 28px 70px rgba(10, 22, 45, .16), 0 2px 8px rgba(10, 22, 45, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 340px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ppnav .mega-inner { background: rgba(255, 255, 255, .98); border-color: var(--line); }
}
.ppnav .mega-main { padding: 26px; }
.ppnav .mega-title {
    font-family: 'DM Mono', monospace;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 16px;
}
.ppnav .mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ppnav .mega-link {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: var(--r-sm);
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.ppnav .mega-link:hover {
    background: rgba(255, 255, 255, .95);
    border-color: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 26px rgba(10, 22, 45, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
    transform: translateY(-1px);
}
.ppnav .mega-ico {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(232, 239, 253, .8);
    color: var(--lead);
    border: 1px solid rgba(29, 82, 207, .18);
    transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.ppnav .mega-link:hover .mega-ico { background: var(--lead); color: #fff; border-color: var(--lead); }
.ppnav .mega-link h4 { font-size: .96rem; font-weight: 600; letter-spacing: -.012em; margin: 0 0 3px; color: var(--ink); }
.ppnav .mega-link p { font-size: .845rem; line-height: 1.45; color: var(--muted); margin: 0; }

.ppnav .mega-aside {
    position: relative;
    padding: 26px;
    background: var(--navy-deep);
    color: rgba(255, 255, 255, .7);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    isolation: isolate;
}
.ppnav .mega-aside::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 90% at 85% 0%, rgba(55, 41, 129, .75), transparent 62%),
        radial-gradient(90% 70% at 10% 100%, rgba(37, 99, 235, .38), transparent 60%);
}
.ppnav .mega-aside .tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-family: 'DM Mono', monospace;
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: auto;
}
.ppnav .mega-aside h4 { color: #fff; font-size: 1.22rem; letter-spacing: -.028em; margin: 24px 0 8px; }
.ppnav .mega-aside p { font-size: .875rem; line-height: 1.5; margin: 0 0 18px; }

/* ---- Burger ----------------------------------------------------------- */
.ppnav .burger { display: none; position: relative; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; padding: 0; }
.ppnav .burger span {
    position: absolute; top: 50%; left: 50%;
    width: 20px; height: 1.6px; margin: -0.8px 0 0 -10px;
    background: var(--ink); border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s var(--ease), background .3s;
}
.ppnav .burger span:nth-child(1) { transform: translateY(-6px); }
.ppnav .burger span:nth-child(3) { transform: translateY(6px); }
body.is-drawer .ppnav .burger span:nth-child(1) { transform: rotate(45deg); }
body.is-drawer .ppnav .burger span:nth-child(2) { opacity: 0; }
body.is-drawer .ppnav .burger span:nth-child(3) { transform: rotate(-45deg); }

/* ---- Mobile drawer ---------------------------------------------------- */
.ppnav .drawer {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 98;
    background: #fff;
    padding: 22px 24px 40px;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s var(--ease), transform .3s var(--ease-out), visibility 0s linear .3s;
}
body.is-drawer .ppnav .drawer { opacity: 1; visibility: visible; transform: none; transition: opacity .26s var(--ease), transform .3s var(--ease-out), visibility 0s; }
.ppnav .drawer-group + .drawer-group { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.ppnav .drawer-group > span {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 12px;
}
.ppnav .drawer a.d-link {
    display: block;
    padding: 13px 0;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.ppnav .drawer a.d-link:last-of-type { border-bottom: 0; }
.ppnav .drawer a.d-link small { display: block; font-size: .84rem; font-weight: 400; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.ppnav .drawer .btn { width: 100%; margin-top: 12px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1000px) {
    .ppnav .nav { display: none; }
    .ppnav .btn--ghost.desktop-only, .ppnav .nav-link.desktop-only { display: none; }
    .ppnav .burger { display: inline-block; }
}
@media (min-width: 1001px) {
    .ppnav .drawer { display: none; }
}