.container {
    max-width: 1180px;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0 auto;
    padding: 0 20px;
}

.site-header {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1218px;
    z-index: 1000;
}

/* The header no longer scrolls away, so in-page anchors have to clear it:
   pill bottom (24 + 72) plus the gap the design keeps under it. */
section[id],
.app-card[id] {
    scroll-margin-top: 120px;
}

.header-pill-container {
    /* position:relative + the ::before below, rather than background/
       backdrop-filter directly on this element: an element with its own
       backdrop-filter becomes a backdrop root, so any descendant that also
       needs backdrop-filter (the Apps/language dropdowns) ends up blurring
       this pill's own already-blurred output instead of the real page behind
       it — which reads as "no blur" since blurring a flat tint does nothing.
       Moving the pill's frost onto a ::before keeps this element filter-free
       so the dropdowns' own backdrop-filter can reach the actual page. */
    position: relative;
    border-radius: 100px;
    padding: 8px 24px;
}

.header-pill-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(254, 254, 254, 0.67);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: inherit;
    box-shadow: 0px 0px 21.4px 0px rgba(0, 20, 36, 0.1);
    z-index: -1;
}

a {
    color: inherit;
    text-decoration: none;
    outline: none;
}

a:visited,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.nav-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}

.nav-logo {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    text-decoration: none;
}

/* Figma shows the square brand asset cropped to a 56x32 window:
   the image is drawn at 64x64 offset by (-4, -16). */
.brand-mark {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 32px;
    overflow: hidden;
}

.brand-mark img {
    position: absolute;
    left: -4px;
    top: -16px;
    width: 64px;
    height: 64px;
    max-width: none;
    display: block;
}

.nav-logo .brand-name {
    font-family: var(--font-brand);
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 20px;
    line-height: normal;
}

.nav-right {
    display: flex;
    align-items: center;
    font-size: var(--text-small);
    gap: 32px;
}

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

.nav-links > li {
    position: relative;
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Figma "Tab" (6354:8905): 40px tall, 8px inline padding, pill radius, text
   centred on both axes. */
.nav-links > li > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 8px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #00074B;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Current page: 2px underline, drawn as a pseudo-element so the tab keeps its
   full 40px box and the text stays centred. */
.nav-links > li.current-menu-item > a::after,
.nav-links > li.current_page_item > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--primary-blue);
    transition: opacity 0.2s ease;
}

/* Hover: filled pill, underline steps aside. Keyed off the item rather than the
   link so the tab stays filled while the pointer is down in its dropdown, the
   way the design draws it. */
.nav-links > li:hover > a,
.nav-links > li.is-open > a {
    background: var(--primary-blue);
    color: #FEFEFE;
}

.nav-links > li:hover > a::after,
.nav-links > li.is-open > a::after {
    opacity: 0;
}

/* ==========================================================================
   Apps dropdown — Figma 6627:12664 (groups) and 6627:12670 (apps of the
   hovered group). Two translucent 16px panels, the second hanging off the
   right edge of the first, top-aligned with it.
   ========================================================================== */

.nav-dropdown {
    position: absolute;
    top: calc(100% + 32px); /* tab bottom 80 -> panel top 112 in the design */
    left: 50%;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity 0.18s ease,
                transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.26s;
}

/* Bridges the 32px gap under the tab so the pointer can reach the panel
   without the hover chain breaking. */
.nav-dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -32px;
    height: 32px;
}

.nav-links > li:hover > .nav-dropdown,
.nav-links > li.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-groups,
.nav-dropdown-apps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 12px 24px;
    list-style: none;
    border-radius: 16px;
}

/* .nav-dropdown-apps (the second-level panel) nests inside a <li> of
   .nav-dropdown-groups. If .nav-dropdown-groups carried backdrop-filter
   directly, it would become a backdrop root and trap .nav-dropdown-apps'
   own backdrop-filter into blurring the groups panel's already-blurred
   output instead of the real page — same issue .header-pill-container had,
   one level deeper. Only the innermost panel (.nav-dropdown-apps, nothing
   nests inside it) gets the glass directly; .nav-dropdown-groups gets it
   via ::before so it stays filter-free for its own nested panel. */
.nav-dropdown-apps {
    background: rgba(254, 254, 254, 0.67);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0px 0px 21.4px 0px rgba(0, 20, 36, 0.1);
}

.nav-dropdown-groups::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(254, 254, 254, 0.67);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: inherit;
    box-shadow: 0px 0px 21.4px 0px rgba(0, 20, 36, 0.1);
    z-index: -1;
}

/* Static on purpose: the app panel below positions against .nav-dropdown, not
   against whichever row opened it. */
.nav-dropdown li {
    position: static;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-dropdown a {
    display: block;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #00074B;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
    color: var(--primary-blue);
}

/* The label row also carries the chevron that marks it as expandable —
   Figma 7212:20515, pointing at whichever group's apps panel is showing.
   (Two classes, not one, so this beats .nav-dropdown a's display:block.) */
.nav-dropdown .nav-dropdown-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* A masked background instead of <img> so it can pick up currentColor and
   change with the label — same navy-to-blue swap the text already does on
   hover/active, instead of staying a flat, unresponsive navy. */
.nav-dropdown-group-arrow {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-image: url('../assets/icons/chevron-down-16.svg');
    mask-image: url('../assets/icons/chevron-down-16.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transform: rotate(-90deg);
}

/* Second panel: 8px right of the group panel, top-aligned with it. It hangs
   off .nav-dropdown rather than its own row so both groups open it in the one
   spot the design puts it (y=112), instead of it stepping down per row. */
.nav-dropdown-apps {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, visibility 0.16s;
}

/* Bridges the group panel's right padding plus the gap, so travelling from a
   group label to its apps does not drop the hover. */
.nav-dropdown-apps::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40px;
    width: 40px;
}

/* The first group is showing until the pointer (or focus) picks another one.
   Gated on the dropdown being open: visibility:visible on a descendant wins
   over a hidden ancestor, so ungated this would leave the app links clickable
   and tabbable over the hero while the menu is shut. */
:is(.nav-links > li:hover, .nav-links > li.is-open) > .nav-dropdown :is(
    .nav-dropdown-groups:not(:hover):not(:focus-within) > li:first-child,
    .nav-dropdown-groups > li:hover,
    .nav-dropdown-groups > li.is-open
) > .nav-dropdown-apps {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-groups:not(:hover):not(:focus-within) > li:first-child > .nav-dropdown-group-label,
.nav-dropdown-groups > li:hover > .nav-dropdown-group-label,
.nav-dropdown-groups > li.is-open > .nav-dropdown-group-label {
    color: var(--primary-blue);
}

/* ==========================================================================
   Mobile menu
   No Figma frame exists for the open state, so it reuses the header's own
   language: the sheet drops out of the pill with the same translucent fill,
   blur and shadow, aligned to the same 20px gutters.
   ========================================================================== */

.mobile-menu-toggle {
    display: none;
    position: relative;
    z-index: 2;
    padding: 0 6px;
    background: none;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-menu-toggle:hover {
    background-color: rgba(14, 19, 63, 0.06);
}

/* Three bars matching fluent:line-horizontal-3, drawn in CSS so they can
   morph into a close icon. */
.mobile-menu-toggle .burger {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
}

.mobile-menu-toggle .burger span {
    position: absolute;
    left: 2px;
    width: 20px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--black);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease;
}

.mobile-menu-toggle .burger span:nth-child(1) { top: 5px; }
.mobile-menu-toggle .burger span:nth-child(2) { top: 11.25px; }
.mobile-menu-toggle .burger span:nth-child(3) { top: 17.5px; }

.mobile-menu-toggle[aria-expanded="true"] .burger span:nth-child(1) {
    transform: translateY(6.25px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.3);
}

.mobile-menu-toggle[aria-expanded="true"] .burger span:nth-child(3) {
    transform: translateY(-6.25px) rotate(-45deg);
}

/* --- the sheet --- */

.mobile-nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 999;
    padding: 8px;
    border-radius: 28px;
    /* Kept close to opaque: the scrim behind it would otherwise show through
       and turn the frosted fill grey. */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 18px 44px rgba(0, 20, 36, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top center;
    transition: opacity 0.26s ease,
                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.34s;
}

.mobile-nav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.mobile-nav-links ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav-links li {
    list-style: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav.active .mobile-nav-links li {
    opacity: 1;
    transform: none;
}

.mobile-nav.active .mobile-nav-links li:nth-child(1) { transition-delay: 0.05s; }
.mobile-nav.active .mobile-nav-links li:nth-child(2) { transition-delay: 0.09s; }
.mobile-nav.active .mobile-nav-links li:nth-child(3) { transition-delay: 0.13s; }
.mobile-nav.active .mobile-nav-links li:nth-child(4) { transition-delay: 0.17s; }
.mobile-nav.active .mobile-nav-links li:nth-child(5) { transition-delay: 0.21s; }
.mobile-nav.active .mobile-nav-links li:nth-child(6) { transition-delay: 0.25s; }

.mobile-nav-links a {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 16px;
    border-radius: 20px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #00074B;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:focus-visible {
    background-color: rgba(69, 86, 252, 0.09);
    color: var(--primary-blue);
}

.mobile-nav-links .current-menu-item > a,
.mobile-nav-links .current_page_item > a {
    background: var(--primary-blue);
    color: #FEFEFE;
}

/* --- Apps row: tap-to-expand accordion (the label link still jumps to
   #apps; the chevron button reveals the individual app links, since a touch
   device has no hover state to reach them with otherwise) --- */

.menu-item--has-mobile-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.menu-item--has-mobile-dropdown > .mobile-nav-label {
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-apps-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    background: none;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-apps-toggle:hover,
.mobile-apps-toggle:focus-visible {
    background-color: rgba(69, 86, 252, 0.09);
}

.mobile-apps-chevron {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #00074B;
    border-bottom: 2px solid #00074B;
    border-radius: 0 0 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-apps-toggle[aria-expanded="true"] .mobile-apps-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.mobile-apps-panel {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}

.menu-item--has-mobile-dropdown.is-open .mobile-apps-panel {
    max-height: 600px;
    opacity: 1;
}

.mobile-apps-group {
    padding: 4px 0 12px;
}

.mobile-apps-group-label {
    display: block;
    padding: 8px 16px 4px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary-blue);
    text-decoration: none;
}

.mobile-apps-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-apps-list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px 0 32px;
    border-radius: 16px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.4;
    color: #00074B;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-apps-list a:hover,
.mobile-apps-list a:focus-visible {
    background-color: rgba(69, 86, 252, 0.09);
    color: var(--primary-blue);
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(6, 10, 26, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav,
    .mobile-nav-links li,
    .mobile-menu-toggle .burger span,
    .nav-dropdown,
    .nav-dropdown-apps,
    .mobile-apps-panel,
    .mobile-apps-chevron {
        transition-duration: 0.01ms;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }

    .nav-right {
        gap: 40px;
    }

    .nav-links {
        gap: 20px;
    }
}

/* Mobile header — Figma "Header" mobile variant: 353px pill, mark-only logo,
   language toggle + hamburger. */
@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }

    .site-header {
        left: 20px;
        right: 20px;
        width: auto;
        max-width: none;
        transform: none;
    }

    .nav-logo .brand-name {
        display: none;
    }

    .nav-right {
        gap: 16px;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
}

/* The sheet is mobile-only; keep it out of the way on wider screens even if a
   resize happens while it is open. */
@media (min-width: 769px) {
    .mobile-nav,
    .mobile-menu-overlay {
        display: none;
    }
}





/* ==========================================================================
   Language switcher — Figma "Toggle" (h40, 12px inline padding) plus the
   dropdown panel shown in the design's open state.
   ========================================================================== */

.language-switcher {
    position: relative;
}

.language-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 4px 11px; /* 11 + 1px border = Figma's 12px inset, total width 76 */
    background: none;
    border: 1px solid #D7D8E2;
    border-radius: 100px;
    cursor: pointer;
}

.language-toggle .language-code {
    width: 28px;
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: var(--black);
}

.language-toggle img {
    display: block;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.language-switcher[data-open="true"] .language-toggle img {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    /* Same 112px drop as the Apps panels (Figma 6667:18808). */
    top: calc(100% + 32px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: rgba(254, 254, 254, 0.67);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0px 0px 21.4px 0px rgba(0, 20, 36, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.language-switcher:hover .language-dropdown,
.language-switcher:focus-within .language-dropdown,
.language-switcher[data-open="true"] .language-dropdown {
    opacity: 1;
    visibility: visible;
}

.language-dropdown .language-item {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #00074B;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.language-dropdown .language-item:hover,
.language-dropdown .language-item.active {
    color: var(--primary-blue);
}