/* ===== Lumenore Shared Header — extracted from assets/css/v2o/final-home-bundle.css ===== */
/* Pairs with components/header.html + assets/js/header.js. Include on any page that uses the shared header. */

.site-top {
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid rgba(252, 252, 252, .2);
}

.hello-bar {
    background: var(--Royal-Blue-Blue-750, #07214b);
    border-bottom: 1px solid rgba(252, 252, 252, .2);
    padding: 10px 48px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hello-bar .hello-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.hello-bar .hello-badge {
    background: var(--Base-White, #fcfcfc);
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.hello-bar .hello-message {
    color: rgba(255, 255, 255, .8);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap;
}

.hello-bar .hello-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 16px;
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

.hello-bar .hello-cta:hover { color: var(--SkyBlue-SkyBlue-500, #12b6f8); }

.hello-bar .hello-cta svg { width: 14px; height: 14px; }

.hello-bar .hello-login {
    color: rgba(255, 255, 255, .9);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    padding: 8px 0 8px 16px;
    margin-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    white-space: nowrap;
}

.hello-bar .hello-login:hover { color: var(--SkyBlue-SkyBlue-500, #12b6f8); }

.hello-bar .hello-consult {
    color: rgba(255, 255, 255, .9);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    padding: 8px 0;
    white-space: nowrap;
}

.hello-bar .hello-consult:hover { color: var(--SkyBlue-SkyBlue-500, #12b6f8); }

.site-header {
    position: relative;
    z-index: 20;
    background: var(--Royal-Blue-Blue-900, #051A3C);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    height: 81px;
    padding: 20px 48px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-header .brand-mark {
    display: inline-flex;
    align-items: center;
    height: 44px;
    color: var(--Base-White, #fcfcfc);
    text-decoration: none;
}

.site-header .brand-mark .brand-l {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 30px;
    color: var(--SkyBlue-SkyBlue-500, #12b6f8);
    margin-right: 2px;
}

.site-header .brand-mark .brand-word {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: .12em;
    color: var(--Base-White, #fcfcfc);
    position: relative;
    top: 2px;
}

.site-header .brand-mark .brand-ai {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    color: var(--SkyBlue-SkyBlue-500, #12b6f8);
    margin-left: 4px;
    align-self: flex-start;
    margin-top: 2px;
}

.site-header .nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.site-header .nav-links > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .9);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    white-space: nowrap;
    cursor: pointer;
}

.site-header .nav-links > li > a:hover { color: var(--SkyBlue-SkyBlue-500, #12b6f8); }

.site-header .nav-links > li > a .caret {
    width: 8px;
    height: 4px;
    flex: 0 0 8px;
}

.site-header .nav-links > li > a .nav-ai-icon {
    width: 15px;
    height: 14px;
    flex: 0 0 15px;
}

.site-header .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header .nav-actions > a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
}

.site-header .btn-demo {
    /* Declared here, at the same specificity as the ≤991px `display: none`
       below, so that hide still wins by source order. It used to live in the
       shared metrics rule at the bottom of this file, whose doubled classes
       outrank the hide — see the note there. */
    display: inline-flex;
    background:
        linear-gradient(var(--Royal-Blue-Blue-900, #051A3C), var(--Royal-Blue-Blue-900, #051A3C)) padding-box,
        var(--Explore-Button) border-box;
    border: 2px solid transparent;
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.2;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition:
        transform .22s cubic-bezier(.22, .61, .36, 1),
        box-shadow .22s cubic-bezier(.22, .61, .36, 1),
        background .22s ease;
    white-space: nowrap;
}

.site-header .btn-demo:hover {
    background:
        linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) padding-box,
        var(--Explore-Button) border-box;
    transform: translateY(-1px);
    box-shadow:
        0 8px 24px -8px rgba(64, 117, 201, .55),
        0 2px 10px -2px rgba(119, 71, 182, .4);
}

.site-header .btn-start {
    background: var(--Explore-Button);
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .25s ease;
}

.site-header .btn-start:hover { filter: brightness(1.1); }

@media (max-width: 991px) {
    .hello-bar.hello-bar { padding: 18px 24px 20px !important; flex-wrap: wrap; row-gap: 12px; }

    .hello-bar .hello-left { flex-wrap: wrap; row-gap: 12px; }

    .hello-bar .hello-badge.hello-badge { font-size: 10px !important; padding: 3px 8px !important; }

    .hello-bar .hello-msg-group { flex-wrap: wrap; row-gap: 6px; }

    .hello-bar .hello-message { white-space: normal; }

    .hello-bar .hello-login { display: none; }

    .site-header { padding: 14px 24px; height: auto; }

    .site-header .nav-links { display: none; }

    .site-header .btn-demo { display: none; }

    .site-header .btn-start.btn-primary { display: none; }

}

@media (max-width: 575px) {
    .hello-bar.hello-bar { padding: 18px 20px 20px !important; gap: 12px; row-gap: 12px; }

    .hello-bar .hello-consult { display: none; }

    .site-header { padding: 12px 20px; }

    .site-header .brand-mark .brand-word { font-size: 15px; }

}

.hello-bar { padding: 10px max(40px, calc((100% - 1500px) / 2 + 40px)) 11px; }

.site-header { padding: 20px max(40px, calc((100% - 1500px) / 2 + 40px)) 21px; }

.hello-bar .hello-left { gap: 10px; }

.hello-bar .hello-msg-group {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

@media (max-width: 991px) {
    .hello-bar { padding: 10px 24px 11px; }

    .site-header { padding: 14px 24px; }

}

@media (max-width: 575px) {
    .hello-bar { padding: 8px 18px; }

    .site-header { padding: 12px 18px; }

}

.site-header .brand-mark { height: 44px; }

.site-header .nav-logo-img {
    height: 42px;
    width: auto;
    display: block;
                                                                                          
    filter: drop-shadow(0 2px 10px rgba(3, 13, 30, .55));
}

.site-top { border-bottom: none; }

.hello-bar { border-bottom: none; }

.site-header {
    border-bottom: none;
                                                                              
    box-shadow:
        0 12px 28px -20px rgba(18, 182, 248, .30),
        0 6px 16px -14px rgba(85, 41, 142, .22);
}

.hello-bar .hello-badge {
    animation: badgePulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
}

.hello-bar .hello-message {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .8) 0%,
        rgba(255, 255, 255, .8) 35%,
        #ffffff 50%,
        rgba(255, 255, 255, .8) 65%,
        rgba(255, 255, 255, .8) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: shimmer 4s linear infinite;
}

.hello-bar .hello-cta svg {
    animation: arrowNudge 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hello-bar .hello-badge,
    .hello-bar .hello-message,
    .hello-bar .hello-cta svg { animation: none; }

    .hello-bar .hello-message {
        -webkit-text-fill-color: rgba(255, 255, 255, .8);
        color: rgba(255, 255, 255, .8);
    }

}

.hero-stage .site-top { position: sticky; top: 0; z-index: 200; background: transparent; }

.hero-stage .hello-bar { background: transparent; }

.hero-stage .site-header { background: transparent; }

.site-top.site-top {
    position: sticky;
    top: 0;
    z-index: 200;
    background: transparent;
    border-bottom: none;
}

.hello-bar.hello-bar {
    background: rgba(7, 33, 75, .55);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.site-header.site-header {
    position: relative;
    background: rgba(3, 13, 30, .55);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
            backdrop-filter: blur(18px) saturate(155%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 8px 24px -16px rgba(0, 0, 0, .35);
}

.site-header.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(119, 71, 182, .35) 22%,
        rgba(40, 99, 195, .42) 50%,
        rgba(28, 169, 201, .35) 78%,
        transparent 100%);
    pointer-events: none;
}

.site-header.is-scrolled.is-scrolled {
    background: rgba(5, 20, 55, .95);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.hero-stage .site-top {
    background: transparent;
}

.hero-stage .site-header { z-index: 60; }

.nav-links { position: relative; }

.site-header .nav-links { position: static; }

.nav-item {
    position: relative;
}

.nav-item.has-dropdown::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 18px;
    pointer-events: none;
}

.nav-item.has-dropdown:hover::after,
.nav-item.has-dropdown:focus-within::after {
    pointer-events: auto;
}

.nav-item--platform,
.nav-item--solutions,
.nav-item--resources,
.nav-item--company {
    position: static;
}

.nav-item--platform.has-dropdown::after,
.nav-item--solutions.has-dropdown::after,
.nav-item--resources.has-dropdown::after,
.nav-item--company.has-dropdown::after {
    display: none;
}

.nav-trigger .caret {
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.nav-item.has-dropdown:hover .nav-trigger .caret,
.nav-item.has-dropdown:focus-within .nav-trigger .caret {
    transform: rotate(180deg);
}

.nav-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
                                                                                                                                         
    padding: 28px 32px;
    background: rgba(7, 14, 32, .96);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .35),
        0 30px 60px -20px rgba(0, 0, 0, .55),
        0 12px 30px -10px rgba(85, 41, 142, .22),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
    transition:
        opacity .25s cubic-bezier(.22, .61, .36, 1),
        transform .25s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear .25s;
    overflow: hidden;
}

.nav-mega::after { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; background: transparent; }

.nav-mega::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(119, 71, 182, .55) 25%,
        rgba(40, 99, 195, .55) 50%,
        rgba(28, 169, 201, .55) 75%,
        transparent 100%);
    pointer-events: none;
}

.nav-item.has-dropdown:hover > .nav-mega,
.nav-item.has-dropdown:focus-within > .nav-mega,
.nav-item.has-dropdown.is-open > .nav-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
        opacity .25s cubic-bezier(.22, .61, .36, 1),
        transform .25s cubic-bezier(.22, .61, .36, 1),
        visibility 0s;
}

@media (max-width: 991px) {
    .nav-mega { display: none; }

}

.nav-mega--platform,
.nav-mega--solutions,
.nav-mega--resources {
    display: grid;
    gap: 0;
    padding: 0;
                                                                                                                                                                                       
    position: absolute;
    top: 100%;
    left:  max(40px, calc((100vw - 1500px) / 2 + 40px));
    right: max(40px, calc((100vw - 1500px) / 2 + 40px));
    min-width: 0;
    width: auto;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    transform: translateY(-6px);
}

.nav-mega--platform::before,
.nav-mega--solutions::before,
.nav-mega--resources::before {
    display: none;
}

.nav-mega--platform,
.nav-mega--solutions { grid-template-columns: 240px 1fr 280px; }

.nav-mega--resources { grid-template-columns: 1fr 320px; }

.np-nav.np-nav--wide {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: 28px 0;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.np-nav.np-nav--wide .np-nav-section {
    gap: 0;
    padding: 0 32px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.np-nav.np-nav--wide .np-nav-section:last-child {
    border-right: none;
}

.site-header:has(.nav-item--platform:hover)       #platformMega,
.site-header:has(.nav-item--platform:focus-within) #platformMega,
.site-header:has(.nav-item--platform.is-open)      #platformMega,
.site-header:has(.nav-item--solutions:hover)        #solutionMega,
.site-header:has(.nav-item--solutions:focus-within) #solutionMega,
.site-header:has(.nav-item--solutions.is-open)      #solutionMega,
.site-header:has(.nav-item--resources:hover)        #resourcesMega,
.site-header:has(.nav-item--resources:focus-within) #resourcesMega,
.site-header:has(.nav-item--resources.is-open)      #resourcesMega,
.site-header:has(.nav-item--company:hover)          #companyMega,
.site-header:has(.nav-item--company:focus-within)   #companyMega,
.site-header:has(.nav-item--company.is-open)        #companyMega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity .25s cubic-bezier(.22, .61, .36, 1),
        transform .25s cubic-bezier(.22, .61, .36, 1),
        visibility 0s;
}

/* Fallback for browsers without :has() support (older Chrome/Edge/Firefox builds
   still shipping on some Windows laptops). Without this the generic
   `.nav-item.has-dropdown:hover > .nav-mega` rule applies translateX(-50%) to the
   full-width mega panels, dragging them half a viewport off-screen so the
   Capabilities / Solutions links land outside the window and cannot be clicked. */
.nav-item--platform.has-dropdown:hover      > .nav-mega,
.nav-item--platform.has-dropdown:focus-within > .nav-mega,
.nav-item--platform.has-dropdown.is-open    > .nav-mega,
.nav-item--solutions.has-dropdown:hover     > .nav-mega,
.nav-item--solutions.has-dropdown:focus-within > .nav-mega,
.nav-item--solutions.has-dropdown.is-open   > .nav-mega,
.nav-item--resources.has-dropdown:hover     > .nav-mega,
.nav-item--resources.has-dropdown:focus-within > .nav-mega,
.nav-item--resources.has-dropdown.is-open   > .nav-mega,
.nav-item--company.has-dropdown:hover       > .nav-mega,
.nav-item--company.has-dropdown:focus-within > .nav-mega,
.nav-item--company.has-dropdown.is-open     > .nav-mega {
    transform: translateY(0);
}

.np-nav {
    padding: 28px 22px 28px 28px;
    border-right: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.np-nav-section {
    display: flex;
    flex-direction: column;
}

.np-nav-title {
    margin: 0 0 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.np-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.np-nav-list a {
    display: block;
    padding: 8px 12px;
    margin: 0 -12px;
    color: rgba(255, 255, 255, .78);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
    position: relative;
}

.np-nav-list a:hover,
.np-nav-list a.is-active {
    background: rgba(64, 117, 201, .16);
    color: #ffffff;
    transform: translateX(2px);
}

.np-nav-list a.is-active::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, #7747b6 0%, #2863c3 50%, #1ca9c9 100%);
}

.np-nav-section:has(.np-cap-link) {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.np-nav-list a.np-cap-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
}

.np-nav-list a.np-cap-link svg {
    color: rgba(255, 255, 255, .42);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), color .25s ease;
}

.np-nav-list a.np-cap-link:hover svg,
.np-nav-list a.np-cap-link.is-active svg {
    color: #67d3ff;
    transform: translateX(2px);
}

.np-detail {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    min-width: 0;
}

.np-grid-title {
    margin-bottom: 16px;
}

.np-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.np-grid[hidden],
.np-grid-title[hidden],
.np-product-pane[hidden] {
    display: none;
}

.np-grid-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .88);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 16px;
    text-decoration: none;
    transition:
        background .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .25s cubic-bezier(.22, .61, .36, 1);
}

.np-grid-card .np-grid-ic {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(40, 99, 195, .12);
    color: #aec7f0;
    transition: background .22s ease, color .22s ease;
}

.np-grid-card:hover,
.np-grid-card.is-active {
    background: rgba(64, 117, 201, .14);
    border-color: rgba(64, 117, 201, .38);
    color: #ffffff;
    transform: translateY(-1px);
}

.np-grid-card:hover .np-grid-ic,
.np-grid-card.is-active .np-grid-ic {
    background: rgba(40, 99, 195, .24);
    color: #ffffff;
}

.np-pane-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    background: rgba(40, 99, 195, .12);
    border: 1px solid rgba(40, 99, 195, .28);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #aec7f0;
    margin-bottom: 14px;
}

.np-pane-kind .np-kind-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: linear-gradient(135deg, #7747b6, #2863c3, #1ca9c9);
}

.np-pane-title {
    margin: 0 0 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -.4px;
    color: #ffffff;
}

.np-pane-tagline {
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .25px;
    text-transform: uppercase;
    color: #67d3ff;
}

.np-pane-desc {
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 22px;
    color: rgba(255, 255, 255, .72);
    max-width: 460px;
}

.np-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    padding: 0;
    color: #67d3ff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(103, 211, 255, .22);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: color .25s ease, border-color .25s ease, gap .25s cubic-bezier(.22, .61, .36, 1);
}

.np-learn-more:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .55);
    gap: 10px;
}

.np-pane-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.np-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}

.np-cta--primary {
    background-image: linear-gradient(to left, #7747b6 0%, #4075c9 50.718%, #1ca9c9 100%);
    background-color: transparent;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 16px -8px rgba(40, 99, 195, .55);
}

.np-cta--primary:hover { transform: translateY(-1px); filter: brightness(1.06); }

.np-cta--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .88);
}

.np-cta--secondary:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .26);
}

.np-releases {
    background: rgba(0, 0, 0, .18);
    border-left: 1px solid rgba(255, 255, 255, .06);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.np-release {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    margin: 0 -6px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}

.np-release:hover {
    background: rgba(64, 117, 201, .12);
    transform: translateX(2px);
}

.np-release-tag {
    align-self: flex-start;
    padding: 2px 7px;
    background: linear-gradient(135deg, #1ca9c9, #2863c3);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: .8px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 2px;
}

.np-release-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: #ffffff;
}

.np-release-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11.5px;
    line-height: 16px;
    color: rgba(255, 255, 255, .56);
}

.np-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #67d3ff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    transition: color .25s ease, gap .25s ease;
}

.np-view-all:hover {
    color: #ffffff;
    gap: 10px;
}

@media (max-width: 1280px) {
    .nav-mega--platform,
    .nav-mega--solutions { grid-template-columns: 220px 1fr 250px; }

    .nav-mega--resources { grid-template-columns: 1fr 290px; }

    .np-pane-title { font-size: 24px; line-height: 30px; }

}

@media (max-width: 1100px) {
    .nav-mega--platform,
    .nav-mega--solutions { grid-template-columns: 200px 1fr 230px; }

    .nav-mega--resources { grid-template-columns: 1fr 260px; }

    .np-nav { padding: 22px 16px 22px 22px; }

    .np-nav.np-nav--wide { grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 22px 0; }

    .np-nav.np-nav--wide .np-nav-section { padding: 0 22px; }

    .np-detail { padding: 24px 22px; }

    .np-releases { padding: 22px 18px; }

}

.hello-bar { padding: 10px max(40px, calc((100% - 1500px) / 2 + 40px)) 11px; }

.site-header { padding: 20px max(40px, calc((100% - 1500px) / 2 + 40px)) 21px; }

.hello-bar .hello-left { gap: 10px; }

.hello-bar .hello-msg-group {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

@media (max-width: 991px) {
    .hello-bar { padding: 10px 24px 11px; }

    .site-header { padding: 14px 24px; }

}

@media (max-width: 575px) {
    .hello-bar { padding: 8px 18px; }

    .site-header { padding: 12px 18px; }

}

.site-header .brand-mark { height: 44px; }

.site-header .nav-logo-img {
    height: 42px;
    width: auto;
    display: block;
                                                                                          
    filter: drop-shadow(0 2px 10px rgba(3, 13, 30, .55));
}

.site-top { border-bottom: none; }

.hello-bar { border-bottom: none; }

.site-header {
    border-bottom: none;
                                                                              
    box-shadow:
        0 12px 28px -20px rgba(18, 182, 248, .30),
        0 6px 16px -14px rgba(85, 41, 142, .22);
}

.hello-bar .hello-badge {
    animation: badgePulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
}

.hello-bar .hello-message {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .8) 0%,
        rgba(255, 255, 255, .8) 35%,
        #ffffff 50%,
        rgba(255, 255, 255, .8) 65%,
        rgba(255, 255, 255, .8) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: shimmer 4s linear infinite;
}

.hello-bar .hello-cta svg {
    animation: arrowNudge 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hello-bar .hello-badge,
    .hello-bar .hello-message,
    .hello-bar .hello-cta svg { animation: none; }

    .hello-bar .hello-message {
        -webkit-text-fill-color: rgba(255, 255, 255, .8);
        color: rgba(255, 255, 255, .8);
    }

}

.hero-stage .site-top { position: sticky; top: 0; z-index: 200; background: transparent; }

.hero-stage .hello-bar { background: transparent; }

.hero-stage .site-header { background: transparent; }

.hello-bar {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.hello-bar {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.hello-bar {
    background:
        linear-gradient(90deg,
            #040c24  0%,
            #160840  18%,
            #2d1272  36%,
            #1e3bab  54%,
            #0d2260  72%,
            #040c24  100%
        ) !important;
    border-bottom: 1px solid rgba(100, 150, 255, 0.22) !important;
    position: relative !important;
    overflow: hidden !important;
}

.hello-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent      0%,
        rgba(119,71,182,0.10) 30%,
        rgba(28,169,201,0.18) 50%,
        rgba(119,71,182,0.10) 70%,
        transparent      100%
    );
    animation: hbShimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hello-bar > * { position: relative; z-index: 1; }

.hello-bar .hello-badge {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 4px 12px 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hello-bar .hello-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: hbPulse 1.8s ease-out infinite;
}

.hello-bar .hello-message {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500 !important;
}

.hello-bar .hello-cta {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transition: color 0.2s !important;
}

.hello-bar .hello-cta:hover {
    color: #12b6f8 !important;
    box-shadow: none !important;
}

.hello-bar .hello-cta svg { width: 13px !important; height: 13px !important; }

.hello-bar .hello-consult {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 13px !important;
    transition: color 0.2s !important;
}

.hello-bar .hello-consult:hover {
    color: #12b6f8 !important;
}

.hello-bar .hello-login {
    color: rgba(255,255,255,0.75) !important;
    border-left-color: rgba(255,255,255,0.15) !important;
    font-size: 13px !important;
}

.hello-bar .hello-login:hover { color: #12b6f8 !important; }

.site-top {
    position: relative;
    z-index: 10;
}

.hello-bar {
    background:
        linear-gradient(90deg,
            #040c24  0%,
            #160840  18%,
            #2d1272  36%,
            #1e3bab  54%,
            #0d2260  72%,
            #040c24  100%
        ) !important;
    border-bottom: 1px solid rgba(100, 150, 255, 0.22) !important;
    position: relative !important;
    overflow: hidden !important;
}

.hello-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent      0%,
        rgba(119,71,182,0.10) 30%,
        rgba(28,169,201,0.18) 50%,
        rgba(119,71,182,0.10) 70%,
        transparent      100%
    );
    animation: hbShimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hello-bar > * { position: relative; z-index: 1; }

.hello-bar .hello-badge {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 4px 12px 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hello-bar .hello-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: hbPulse 1.8s ease-out infinite;
}

.hello-bar .hello-message {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500 !important;
}

.hello-bar .hello-cta {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transition: color 0.2s !important;
}

.hello-bar .hello-cta:hover {
    color: #12b6f8 !important;
    box-shadow: none !important;
}

.hello-bar .hello-cta svg { width: 13px !important; height: 13px !important; }

.hello-bar .hello-consult {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 13px !important;
    transition: color 0.2s !important;
}

.hello-bar .hello-consult:hover {
    color: #12b6f8 !important;
}

.hello-bar .hello-login {
    color: rgba(255,255,255,0.75) !important;
    border-left-color: rgba(255,255,255,0.15) !important;
    font-size: 13px !important;
}

.hello-bar .hello-login:hover { color: #12b6f8 !important; }

.site-top {
    position: relative;
    z-index: 10;
}

/* ===== Shared Mobile Hamburger Nav (≤991px) =====
   Pairs with assets/js/index-mobile-nav.js, which builds the toggle
   button + off-canvas panel at runtime by reading the header markup
   above. Load that script (after header.js) on any page that links
   this stylesheet to get a working mobile menu. */

.nav-toggle,
.mobile-nav-panel a,
.mobile-nav-panel button {
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--Base-White, #fcfcfc);
    transition: transform .25s ease, opacity .25s ease;
}

body.mobile-nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }

body.mobile-nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }

body.mobile-nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mnp-backdrop {
    position: fixed;
    top: var(--mnp-offset, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9500;
    background: rgba(3, 9, 22, .55);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

body.mobile-nav-open .mnp-backdrop { opacity: 1; pointer-events: auto; }

.mobile-nav-panel {
    position: fixed;
    top: var(--mnp-offset, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9600;
    width: 100%;
    background: var(--Royal-Blue-Blue-900, #051A3C);
    box-shadow: 0 24px 64px -24px rgba(3, 9, 22, .6);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

body.mobile-nav-open .mobile-nav-panel { transform: translateX(0); }

.mnp-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.mnp-list { display: flex; flex-direction: column; }

.mnp-item { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.mnp-link,
.mnp-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 2px;
    background: none;
    border: none;
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.mnp-trigger {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.mnp-link:hover,
.mnp-link:focus-visible { color: var(--SkyBlue-SkyBlue-500, #12b6f8); }

.mnp-trigger .mnp-caret {
    width: 9px;
    height: 5px;
    flex: 0 0 9px;
    color: rgba(255, 255, 255, .55);
    transition: transform .2s ease;
}

.mnp-item--accordion.is-open .mnp-trigger .mnp-caret { transform: rotate(180deg); }

.mnp-sublist {
    display: flex;
    flex-direction: column;
    padding: 8px 0 8px;
}

.mnp-sublist[hidden] { display: none; }

.mnp-sublist a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 2px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .78);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    transition: background .15s ease, color .15s ease;
}

.mnp-sublist a:hover {
    background: rgba(64, 117, 201, .16);
    color: #ffffff;
}

.mnp-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #aec7f0;
}

.mnp-sublist a:hover .mnp-item-icon { color: #ffffff; }

.mnp-item-icon svg { width: 100%; height: 100%; }

.mnp-item-label { flex: 1; }

.mnp-subgroup { margin-top: 12px; }

.mnp-sublist > .mnp-subgroup:first-child { margin-top: 0; }

.mnp-subgroup-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 12px 2px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    cursor: pointer;
}

.mnp-subgroup-trigger:hover,
.mnp-subgroup-trigger:focus-visible { color: rgba(255, 255, 255, .65); }

.mnp-caret--plus {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: rgba(255, 255, 255, .42);
}

.mnp-caret--plus .mnp-caret-v {
    transform-origin: center;
    transition: transform .2s ease;
}

.mnp-subgroup.is-open .mnp-caret--plus .mnp-caret-v { transform: scaleY(0); }

/* A lone category has nothing to collapse against, so its heading is a
   heading: same type as the trigger above, minus the button chrome and the
   plus/minus that would promise a toggle it doesn't have. */
.mnp-subgroup-title {
    margin: 0;
    padding: 12px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.mnp-subgroup-list[hidden] { display: none; }

.mnp-subgroup-list { padding: 4px 0 4px; }

.mnp-actions { display: flex; flex-direction: column; gap: 10px; }

.mnp-actions .btn-primary { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-bar,
        .mnp-backdrop,
        .mobile-nav-panel { transition: none; }

}

@media (max-width: 991px) {
    .nav-toggle { display: inline-flex; }

    /* The logo is a flex item in a row that also holds two fixed-width CTAs
       and the toggle. Nothing else in that row can shrink, so the logo took
       the whole overflow: it measured 18px wide at 430px and 0px at every
       phone width, i.e. the header had no visible mark at all. */
    .site-header .brand-mark { flex: 0 0 auto; }

}


/* ===== Mobile: only the nav bar stays stuck to the top =====
   .site-top (hello bar + nav) stays sticky as a single unit — same as
   before — rather than trying to make .site-header sticky on its own:
   .site-top only reserves as much height as its two children, so a
   sticky .site-header nested inside it would hit its own parent's
   bottom edge almost immediately and stop sticking within a few
   pixels of scroll. Instead, assets/js/index-mobile-nav.js toggles
   body.hello-bar-hidden once the page has scrolled a bit (mobile
   only), and this collapses the hello bar's own height to 0 so only
   the nav is left visible inside the still-sticky wrapper. */
@media (max-width: 991px) {
    /* max-height is capped close to the bar's real rendered height
       (measured ~64-88px across 576-991px) rather than an oversized
       safety value — a transition from e.g. 200px to 0 spends most of
       its duration animating max-height while it's still above the
       actual content height, so nothing visibly moves until near the
       very end, which reads as a snap instead of a smooth collapse.
       ≤575px gets its own taller cap below (content wraps to ~123px
       on narrow phones). */
    .hello-bar {
        max-height: 72px;
        overflow: hidden;
        transition: max-height .3s ease, opacity .2s ease, padding .3s ease;
    }

    body.hello-bar-hidden .hello-bar {
        max-height: 0;
        opacity: 0;
        /* !important needed: .hello-bar.hello-bar sets padding with
           !important at this same breakpoint (and again at ≤575px), and
           padding isn't clipped by max-height/overflow the way content
           is — without this, 30-40px of top/bottom padding keeps
           rendering even though the bar's content is fully collapsed. */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none;
    }

    /* .site-header's resting background is translucent + blurred
       (rgba(3,13,30,.55) + backdrop-filter) — fine while it's sitting
       above the hero in its normal flow position, but once scrolled
       and stuck at the top it lets the hero content that's scrolled
       behind it show through. Force it fully solid (alpha 1, not just
       "mostly opaque") here instead of relying on the separate
       .is-scrolled class: that class already gets added (toggled by
       header.js) but its own rule is .site-header.is-scrolled.is-scrolled
       (3 classes) — higher specificity than this rule, so it was winning
       and its .95 alpha was still letting bright gradient text bleed
       through visibly. !important forces this one to win instead. */
    body.hello-bar-hidden .site-header {
        background: #051931 !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }

}

@media (max-width: 575px) {
    /* Narrow phones wrap the hello bar's content onto more lines
       (measured ~123px vs ~64-88px above 575px) — same reasoning as
       the ≤991px block above, just a taller cap so the collapse still
       reads as a smooth shrink instead of mostly-dead-time-then-snap. */
    .hello-bar {
        max-height: 130px;
    }

}

/* ===== Keyframes referenced above ===== */

@keyframes badgePulse{
    0%, 100%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(252, 252, 252, .45);
    }
    50%{
        transform: scale(1.06);
        box-shadow: 0 0 0 6px rgba(252, 252, 252, 0);
    }
}

@keyframes hbShimmer {
    0%   { transform: translateX(-60%); opacity: 0.5; }
    50%  { opacity: 1; }
    100% { transform: translateX(60%);  opacity: 0.5; }
}

@keyframes arrowNudge{
    0%, 100%{ transform: translateX(0); }
    50%{ transform: translateX(4px); }
}

@keyframes hbPulse {
    0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.7); }
    70%  { box-shadow: 0 0 0 5px rgba(255,255,255,0);   }
    100% { box-shadow: 0 0 0 0   rgba(255,255,255,0);   }
}

@keyframes shimmer{
    0%{ background-position: 120% 0; }
    100%{ background-position: -120% 0; }
}
/* ===== Scroll behavior: hide hello bar on scroll down, compact header ===== */
.site-top {
    --hello-h: 41px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.site-top.hello-hidden { transform: translateY(calc(-1 * var(--hello-h))); }

.site-header,
.site-header .brand-mark,
.site-header .nav-logo-img,
.site-header .nav-links,
.site-header .nav-links > li > a,
.site-header .btn-demo,
.site-header .btn-start {
    transition: height .24s ease, padding .24s ease, font-size .24s ease, gap .24s ease, line-height .24s ease;
}

.site-top.is-compact .site-header {
    height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 18px;
}

.site-top.is-compact .site-header .brand-mark { height: 36px; }
.site-top.is-compact .site-header .nav-logo-img { height: 34px; }
.site-top.is-compact .site-header .nav-links { gap: 26px; }
.site-top.is-compact .site-header .nav-links > li > a { font-size: 14px; line-height: 22px; }
.site-top.is-compact .site-header .nav-actions { gap: 10px; }

@media (prefers-reduced-motion: reduce) {
    .site-top,
    .site-header,
    .site-header .brand-mark,
    .site-header .nav-logo-img,
    .site-header .nav-links,
    .site-header .nav-links > li > a,
    .site-header .btn-demo,
    .site-header .btn-start { transition: none; }
}

/* ===== Nav CTA buttons: identical box metrics =====
   Doubled classes beat .btn-primary.btn-primary.btn-primary--sm in style.css.

   Box metrics ONLY — never `display`. These doubled/tripled selectors outrank
   the `display: none` that hides both CTAs at ≤991px, so declaring display
   here brought them back on every phone and tablet. With the toggle they need
   328px of a 354px content box, so the row overflowed its own header, squeezed
   the logo to zero and pushed the toggle's right edge off-screen — which is
   what made the hamburger look broken. .btn-demo now carries its own display
   up top; .btn-start gets one from .btn-primary in style.css. */
.site-header .btn-demo.btn-demo,
.site-header .btn-start.btn-start.btn-start {
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    padding: 0 18px;
    font-size: 13.5px;
    line-height: 1;
    border-radius: 6px;
}

.site-top.is-compact .site-header .btn-demo.btn-demo,
.site-top.is-compact .site-header .btn-start.btn-start.btn-start {
    height: 32px;
    min-height: 32px;
    padding: 0 15px;
    font-size: 13px;
}

/* ===== Shared page/hero CTA buttons =====
   Dedicated classes keep page CTAs independent from header/nav buttons while
   allowing templates to keep their older visual classes during migration. */
.hero-cta-row.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-cta-row.hero-cta-row > .hero-cta-primary.hero-cta-primary,
.hero-cta-row.hero-cta-row > .hero-cta-secondary.hero-cta-secondary {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 178px;
    min-width: 178px;
    height: 48px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.hero-cta-row.hero-cta-row > .hero-cta-secondary.hero-cta-secondary {
    background:
        linear-gradient(var(--Royal-Blue-Blue-900, #051A3C), var(--Royal-Blue-Blue-900, #051A3C)) padding-box,
        var(--Explore-Button, linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%)) border-box;
    border: 2px solid transparent;
    color: var(--Base-White, #fcfcfc);
}

.hero-cta-row.hero-cta-row > .hero-cta-primary.hero-cta-primary svg,
.hero-cta-row.hero-cta-row > .hero-cta-secondary.hero-cta-secondary svg,
.hero-cta-row.hero-cta-row > .hero-cta-primary.hero-cta-primary span,
.hero-cta-row.hero-cta-row > .hero-cta-secondary.hero-cta-secondary span {
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .hero-cta-row.hero-cta-row {
        gap: 12px;
    }
}

@media (max-width: 575px) {
    .hero-cta-row.hero-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta-row.hero-cta-row > .hero-cta-primary.hero-cta-primary,
    .hero-cta-row.hero-cta-row > .hero-cta-secondary.hero-cta-secondary {
        width: 100%;
        min-width: 0;
    }
}

/* ===== Shared pre-FAQ CTA buttons ===== */
.pre-faq-cta-row.pre-faq-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pre-faq-cta-row.pre-faq-cta-row > a,
.pre-faq-cta-row.pre-faq-cta-row > a.btn-primary.btn-primary--lg,
.pre-faq-cta-row.pre-faq-cta-row > a.btn-demo--lg,
.pre-faq-cta-row.pre-faq-cta-row.hero-cta-row > .hero-cta-primary.hero-cta-primary,
.pre-faq-cta-row.pre-faq-cta-row.hero-cta-row > .hero-cta-secondary.hero-cta-secondary,
.pre-faq-cta-row.pre-faq-cta-row > .pre-faq-cta-primary.pre-faq-cta-primary,
.pre-faq-cta-row.pre-faq-cta-row > .pre-faq-cta-secondary.pre-faq-cta-secondary {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.pre-faq-cta-row.pre-faq-cta-row > a:first-of-type,
.pre-faq-cta-row.pre-faq-cta-row > a.btn-primary.btn-primary--lg:first-of-type,
.pre-faq-cta-row.pre-faq-cta-row.hero-cta-row > .hero-cta-primary.hero-cta-primary:first-of-type,
.pre-faq-cta-row.pre-faq-cta-row > .pre-faq-cta-primary.pre-faq-cta-primary {
    background: var(--CTA-Button,
        linear-gradient(100deg, #1ca9c9 0%, #2863c3 50%, #7747b6 100%));
    border: 2px solid transparent;
    color: var(--Base-White, #fcfcfc);
}

.pre-faq-cta-row.pre-faq-cta-row > a:nth-of-type(2),
.pre-faq-cta-row.pre-faq-cta-row > a.btn-demo--lg:nth-of-type(2),
.pre-faq-cta-row.pre-faq-cta-row.hero-cta-row > .hero-cta-secondary.hero-cta-secondary:nth-of-type(2),
.pre-faq-cta-row.pre-faq-cta-row > .pre-faq-cta-secondary.pre-faq-cta-secondary {
    background:
        linear-gradient(var(--Royal-Blue-Blue-900, #051A3C), var(--Royal-Blue-Blue-900, #051A3C)) padding-box,
        var(--Explore-Button, linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%)) border-box;
    border: 2px solid transparent;
    color: var(--Base-White, #fcfcfc);
}

@media (max-width: 991px) {
    .pre-faq-cta-row.pre-faq-cta-row {
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .pre-faq-cta-row.pre-faq-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pre-faq-cta-row.pre-faq-cta-row > a,
    .pre-faq-cta-row.pre-faq-cta-row > a.btn-primary.btn-primary--lg,
    .pre-faq-cta-row.pre-faq-cta-row > a.btn-demo--lg,
    .pre-faq-cta-row.pre-faq-cta-row.hero-cta-row > .hero-cta-primary.hero-cta-primary,
    .pre-faq-cta-row.pre-faq-cta-row.hero-cta-row > .hero-cta-secondary.hero-cta-secondary,
    .pre-faq-cta-row.pre-faq-cta-row > .pre-faq-cta-primary.pre-faq-cta-primary,
    .pre-faq-cta-row.pre-faq-cta-row > .pre-faq-cta-secondary.pre-faq-cta-secondary {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding: 12px 20px;
        font-size: 16px;
        white-space: normal;
    }
}

@media (max-width: 408px) {
    .site-header.site-header {
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .site-header .brand-mark {
        min-width: 0;
        max-width: calc(100% - 58px);
    }

    .site-header .nav-logo-img {
        width: auto;
        max-width: min(188px, 100%);
        height: 38px;
        object-fit: contain;
    }

    .site-header .nav-actions {
        flex: 0 0 auto;
        gap: 0;
        margin-left: auto;
    }

    .site-header .btn-demo.btn-demo,
    .site-header .btn-start.btn-start.btn-start {
        display: none;
    }

    .nav-toggle.nav-toggle {
        display: inline-flex;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }
}

/* Keep shared header text stable when page-level product CSS redefines link
   or gradient text colors after the header is rendered. */
.site-top.site-top .site-header.site-header .nav-links > li > a,
.site-top.site-top .site-header.site-header .nav-links > li > a:visited,
.site-top.site-top .site-header.site-header .nav-links > li > a:hover,
.site-top.site-top .site-header.site-header .nav-links > li > a:focus,
.site-top.site-top .site-header.site-header .nav-trigger,
.site-top.site-top .site-header.site-header .nav-trigger:visited,
.site-top.site-top .site-header.site-header .nav-trigger:hover,
.site-top.site-top .site-header.site-header .nav-trigger:focus,
.site-top.site-top .site-header.site-header .nav-actions > a,
.site-top.site-top .site-header.site-header .nav-actions > a:visited,
.site-top.site-top .site-header.site-header .nav-actions > a:hover,
.site-top.site-top .site-header.site-header .nav-actions > a:focus,
.site-top.site-top .site-header.site-header .btn-demo,
.site-top.site-top .site-header.site-header .btn-start,
.site-top.site-top .site-header.site-header .np-pane-title,
.site-top.site-top .site-header.site-header #npProductTitle {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.site-top.site-top .site-header.site-header .nav-links > li > a *,
.site-top.site-top .site-header.site-header .nav-trigger *,
.site-top.site-top .site-header.site-header .nav-actions > a *,
.site-top.site-top .site-header.site-header .np-pane-title * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}