@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/montserrat-vietnamese-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/montserrat-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #020814;
    color: #dbe9ff;
    font: 400 16px/1.65 Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}

a {
    color: #7ddcff;
    text-decoration: none
}

a:hover {
    color: #b9f2ff
}

img {
    max-width: 100%;
    height: auto
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px
}

.skip-link:focus {
    left: 8px;
    z-index: 999;
    background: #fff;
    color: #00152d;
    padding: .7rem 1rem;
    border-radius: .6rem
}

.shell {
    width: min(1220px, calc(100% - 40px));
    margin: auto
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(2, 8, 20, .93);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #143457
}

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 24px
}

.brand img {
    width: 260px;
    height: auto;
    max-height: 54px;
    object-fit: contain;
    object-position: left center
}

.primary-nav {
    display: flex;
    gap: 6px;
    margin-left: auto
}

.nav-item {
    position: relative
}

.nav-button,
.icon-button,
.menu-button {
    background: none;
    color: #dbe9ff;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: .65rem .75rem;
    font: inherit;
    cursor: pointer
}

.nav-button:hover,
.nav-button[aria-expanded=true],
.icon-button:hover {
    background: #071a33;
    border-color: #1c4e79
}

.mega {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 650px;
    padding: 18px;
    background: #061426;
    border: 1px solid #1c4e79;
    border-radius: 16px;
    box-shadow: 0 30px 80px #000b;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 8px
}

.nav-item.open .mega {
    display: grid
}

.mega a {
    padding: .65rem;
    border-radius: 8px;
    color: #cfe5ff
}

.mega a:hover {
    background: #0a2343
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.menu-button {
    display: none
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid #2bc2ff;
    border-radius: 11px;
    padding: .78rem 1rem;
    background: linear-gradient(135deg, #0d6ce8, #08a3c8);
    color: white;
    font-weight: 700;
    cursor: pointer
}

.button:hover {
    color: white;
    filter: brightness(1.08)
}

.button.ghost,
.button-ghost {
    background: transparent;
    border-color: #315578
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 72px;
    border-bottom: 1px solid #0f3152;
    background: radial-gradient(circle at 70% 20%, rgba(0, 158, 255, .16), transparent 34%), radial-gradient(circle at 20% 80%, rgba(101, 64, 255, .15), transparent 32%), #020814
}

.hero:before,
.topic-grid {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(77, 145, 205, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(77, 145, 205, .07) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, #000, transparent)
}

.hero .shell {
    position: relative
}

.eyebrow,
.kicker {
    display: inline-block;
    color: #7ddcff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.hero h1 {
    max-width: 940px;
    margin: .7rem 0 1rem;
    font-size: clamp(35px, 6vw, 60px);
    line-height: .98;
    letter-spacing: -.045em;
    color: #f5fbff
}

.hero p {
    max-width: 820px;
    font-size: clamp(16px, 2vw, 22px);
    color: #a9c3dc
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.7rem
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2.2rem
}

.metric {
    padding: 14px;
    border: 1px solid #153a60;
    background: #071626b8;
    border-radius: 12px
}

.metric strong {
    display: block;
    color: #fff
}

.metric span {
    font-size: 14px;
    color: #8eacc7
}

.section {
    padding: 76px 0
}

.section.alt {
    background: #04101f
}

.section-head {
    max-width: 820px;
    margin-bottom: 32px
}

.section h2 {
    margin: .3rem 0 .7rem;
    font-size: clamp(22px, 3vw, 35px);
    line-height: 1.1;
    color: #f1f8ff
}

.section p {
    color: #a8bfd5
}

.grid {
    display: grid;
    gap: 16px
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.card,
.panel {
    position: relative;
    border: 1px solid #173b60;
    background: linear-gradient(180deg, #07172a, #04111f);
    border-radius: 16px;
    padding: 20px;
    min-width: 0
}

.card:hover {
    border-color: #2e7fb2;
    transform: translateY(-2px);
    transition: .2s
}

.card .svg-icon {
    width: 28px;
    height: 28px;
    color: #65d8ff
}

.card h3,
.panel h3 {
    margin: .8rem 0 .45rem;
    color: #f1f8ff
}

.card p,
.panel p {
    margin: .35rem 0;
    color: #9fb9d0
}

.card .status {
    margin-top: 14px
}

.status {
    display: inline-flex;
    padding: .25rem .48rem;
    border-radius: 999px;
    border: 1px solid #275b83;
    background: #09223b;
    color: #9be8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.process-flow {
    display: flex;
    align-items: stretch;
    gap: 7px;
    overflow: auto;
    padding: 4px 0
}

.process-step {
    min-width: 125px;
    flex: 1;
    padding: 14px;
    border: 1px solid #1d4c75;
    background: #06182b;
    border-radius: 12px
}

.process-step span {
    display: block;
    font-size: 11px;
    color: #62d4ff
}

.process-arrow {
    display: grid;
    place-items: center;
    min-width: 26px;
    color: #48c3f8
}

.process-arrow .svg-icon {
    width: 20px
}

.simple-diagram,
.policy-flow {
    display: grid;
    gap: 8px
}

.simple-diagram {
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    align-items: center
}

.diagram-node,
.policy-node {
    padding: 14px;
    border: 1px solid #23608c;
    border-radius: 12px;
    background: #071a2f;
    text-align: center
}

.diagram-node strong,
.policy-node strong {
    display: block;
    color: #fff
}

.diagram-arrow {
    text-align: center;
    color: #69dafb
}

.policy-flow {
    grid-template-columns: repeat(5, minmax(130px, 1fr))
}

.transition-formula {
    display: grid;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    gap: 8px;
    align-items: stretch
}

.transition-term {
    border: 1px solid #624b9d;
    background: #15102b;
    padding: 14px;
    border-radius: 12px
}

.transition-term b {
    display: block;
    color: #d9c9ff
}

.trust-chain {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.trust-chain span {
    border: 1px solid #2a5d80;
    border-radius: 999px;
    padding: .5rem .7rem;
    background: #071b31;
    color: #b7eaff;
    font-weight: 700
}

.table-wrap {
    overflow: auto;
    border: 1px solid #173b60;
    border-radius: 14px
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    background: #04111f
}

.data-table caption {
    text-align: left;
    padding: 12px;
    color: #88a8c5
}

.data-table th,
.data-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #12324f;
    vertical-align: top;
    text-align: left;
    font-size: 14px
}

.data-table th {
    position: sticky;
    top: 0;
    background: #08203a;
    color: #c7eeff
}

.data-table td {
    color: #acc4d8
}

.notice {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #17617a;
    background: #062532;
    border-radius: 12px
}

.notice.warn {
    border-color: #885f22;
    background: #25190b;
    color: #ffd99a
}

.status-line {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.status-line span {
    padding: .6rem .7rem;
    border: 1px solid #315a7b;
    background: #071a2e;
    border-radius: 9px
}

.portal-frame {
    display: grid;
    grid-template-columns: 210px 1fr;
    min-height: 480px;
    border: 1px solid #1b527c;
    border-radius: 18px;
    overflow: hidden;
    background: #06121f;
    box-shadow: 0 20px 70px #0007
}

.portal-sidebar {
    padding: 16px;
    background: #04101d;
    border-right: 1px solid #163752
}

.portal-sidebar strong {
    display: block;
    color: #fff;
    margin-bottom: 16px
}

.portal-sidebar a {
    display: block;
    padding: .6rem;
    border-radius: 8px;
    color: #9db9d1
}

.portal-sidebar a.active {
    background: #0d3154;
    color: #fff
}

.portal-main {
    padding: 18px
}

.portal-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #143552
}

.portal-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 16px
}

.ui-card {
    min-height: 130px;
    border: 1px solid #1a4164;
    background: #07182a;
    border-radius: 12px;
    padding: 14px
}

.ui-card strong {
    display: block;
    color: #fff
}

.ui-card small {
    color: #6bd4f7
}

.architecture-figure {
    margin: 0
}

.lightbox-trigger {
    display: block;
    width: 100%;
    border: 1px solid #1a4c74;
    background: #03101d;
    border-radius: 14px;
    padding: 0;
    cursor: zoom-in;
    overflow: hidden
}

.architecture-figure figcaption {
    color: #819eb8;
    font-size: 14px;
    padding: .7rem 0
}

.code {
    overflow: auto;
    border: 1px solid #1c527c;
    background: #020b15;
    color: #aee7ff;
    padding: 18px;
    border-radius: 14px
}

.lead-form {
    max-width: 960px
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.lead-form label {
    display: grid;
    gap: 6px;
    color: #bed4e6
}

.lead-form input,
.lead-form textarea {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid #244d6d;
    border-radius: 9px;
    background: #04111e;
    color: #e9f7ff
}

.lead-form .full {
    margin-top: 12px
}

.consent {
    grid-template-columns: auto 1fr !important;
    align-items: start;
    margin: 16px 0
}

.consent input {
    width: auto
}

.form-status {
    min-height: 1.5rem
}

.site-footer {
    padding: 50px 0;
    border-top: 1px solid #143451;
    background: #01060d
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 24px
}

.footer-grid strong {
    color: white
}

.footer-grid a {
    display: block;
    padding: .25rem 0;
    color: #94b0c8
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #12304b;
    color: #718ca5;
    font-size: 14px
}

.breadcrumbs {
    padding: 14px 0;
    color: #7f9db7;
    font-size: 14px
}

.breadcrumbs a {
    color: #94c9e7
}

.search-dialog,
.lightbox-dialog {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    background: rgba(0, 4, 10, .84);
    padding: 6vh 20px
}

.search-dialog.open,
.lightbox-dialog.open {
    display: block
}

.dialog-panel {
    width: min(900px, 100%);
    max-height: 88vh;
    overflow: auto;
    margin: auto;
    background: #061526;
    border: 1px solid #24577b;
    border-radius: 16px;
    padding: 18px
}

.dialog-head {
    display: flex;
    gap: 10px
}

.dialog-head input {
    flex: 1;
    background: #03101d;
    color: white;
    border: 1px solid #285575;
    border-radius: 9px;
    padding: .8rem
}

.search-results a {
    display: block;
    padding: 12px;
    border-bottom: 1px solid #13324f
}

.search-results em {
    color: #6cdaff;
    font-style: normal
}

.lightbox-dialog .dialog-panel {
    width: min(1500px, 100%)
}

.lightbox-dialog img {
    width: 100%;
    height: auto
}

.close-dialog {
    margin-left: auto
}

.svg-icon {
    width: 1.2em;
    height: 1.2em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cta-band {
    padding: 48px 0;
    background: linear-gradient(90deg, #071d38, #0e1133);
    border-top: 1px solid #18466e;
    border-bottom: 1px solid #18466e
}

.cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px
}

.cta-inner h2 {
    margin: 0;
    color: white
}

.faq details {
    border-bottom: 1px solid #17344f;
    padding: 14px 0
}

.faq summary {
    cursor: pointer;
    color: #e7f5ff;
    font-weight: 700
}

.faq p {
    margin: .6rem 0 0
}

.architecture-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    background: #fff
}

@media(max-width:1000px) {
    .primary-nav {
        display: none;
        position: absolute;
        left: 20px;
        right: 20px;
        top: 76px;
        background: #061426;
        border: 1px solid #1c4e79;
        border-radius: 14px;
        padding: 10px;
        flex-direction: column
    }

    .primary-nav.open {
        display: flex
    }

    .menu-button {
        display: block
    }

    .nav-item {
        width: 100%
    }

    .nav-button {
        width: 100%;
        text-align: left
    }

    .mega {
        position: static;
        min-width: 0;
        grid-template-columns: 1fr 1fr;
        box-shadow: none;
        margin-top: 4px
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .simple-diagram {
        grid-template-columns: 1fr
    }

    .diagram-arrow {
        transform: rotate(90deg)
    }

    .policy-flow {
        grid-template-columns: 1fr 1fr
    }

    .transition-formula {
        grid-template-columns: 1fr 1fr 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .portal-frame {
        grid-template-columns: 170px 1fr
    }
}

@media(max-width:680px) {
    .shell {
        width: min(100% - 28px, 1220px)
    }

    .hero {
        padding: 62px 0 48px
    }

    .header-inner {
        min-height: 68px
    }

    .brand img {
        width: 210px
    }

    .primary-nav {
        top: 68px
    }

    .header-actions .button {
        display: none
    }

    .metrics,
    .grid-2,
    .grid-3,
    .grid-4,
    .split,
    .policy-flow,
    .transition-formula,
    .form-grid {
        grid-template-columns: 1fr
    }

    .portal-frame {
        grid-template-columns: 1fr
    }

    .portal-sidebar {
        display: none
    }

    .portal-content {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-bottom,
    .cta-inner {
        flex-direction: column;
        align-items: flex-start
    }

    .section {
        padding: 54px 0
    }

    .mega {
        grid-template-columns: 1fr
    }

    .process-step {
        min-width: 150px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important
    }
}

:focus-visible {
    outline: 3px solid #67dcff;
    outline-offset: 3px
}

.statusbar {
    background: #01060d;
    border-bottom: 1px solid #0c2843;
    font-size: 12px;
    color: #7291ad
}

.statusbar .shell {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0
}

.statusbar span:last-child {
    display: flex;
    gap: 14px
}

.nav-shell {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 16px
}

.nav-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    color: #c8dff2;
    font: 600 14px/1.2 inherit;
    padding: .65rem .5rem;
    cursor: pointer;
    border-radius: 8px
}

.nav-trigger .ico {
    width: 13px;
    height: 13px;
    transform: rotate(90deg)
}

.nav-trigger:hover,
.nav-trigger.active,
.nav-item.open .nav-trigger {
    background: #08203a;
    color: #fff
}

.mega a {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.mega a strong {
    font-size: 14px
}

.mega a span {
    font-size: 12px;
    color: #7d9ab4
}

.button-small {
    padding: .58rem .72rem;
    font-size: 12px
}

.mobile-menu {
    display: none
}

.ico {
    width: 1.25em;
    height: 1.25em;
    stroke: currentColor;
    fill: none;
    vertical-align: -.18em
}

.badge.maturity {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: .25rem .5rem;
    border: 1px solid #285c83;
    border-radius: 999px;
    background: #09233c;
    color: #91defc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em
}

.badge.pilot-ready {
    border-color: #16775e;
    background: #062e29;
    color: #8af0d4
}

.badge.reference-implementation {
    border-color: #6a4ba3;
    background: #1a1232;
    color: #cab2ff
}

.badge.reference-architecture,
.badge.canonical-reference {
    border-color: #2f5ea5;
    background: #0b1e45;
    color: #a9c7ff
}

.badge.ui-ux-baseline {
    border-color: #9a6525;
    background: #291b09;
    color: #ffd69a
}

.badge.external-dependency,
.badge.applicability-dependent {
    border-color: #7e5d26;
    background: #22180b;
    color: #eac58b
}

.badge.public,
.badge.public-register,
.badge.public-assurance {
    border-color: #1a7a70;
    background: #062c2b;
    color: #8fe8df
}

.badge.research {
    border-color: #6f486e;
    background: #29122a;
    color: #e1b5e3
}

.badge.download {
    border-color: #2174a4;
    background: #08263b;
    color: #9ddaff
}

.badge.evidence-first {
    border-color: #198374;
    background: #062c2c;
    color: #88e4d7
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 62px;
    background: radial-gradient(circle at 84% 20%, rgba(12, 128, 255, .13), transparent 32%), #020814;
    border-bottom: 1px solid #123452
}

.page-hero .shell {
    position: relative
}

.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(58, 123, 186, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 123, 186, .06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(#000, transparent)
}

.hero-copy {
    position: relative;
    max-width: 950px
}

.eyebrow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.page-hero h1 {
    margin: .6rem 0 .8rem;
    color: #f4fbff;
    font-size: clamp(35px, 4.6vw, 60px);
    line-height: 1.02;
    letter-spacing: -.035em
}

.page-hero p {
    max-width: 820px;
    font-size: 16px;
    color: #9db8d1
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px
}

.hero-metrics>div {
    padding: 12px 14px;
    border: 1px solid #1b456c;
    background: #06172a;
    border-radius: 12px
}

.hero-metrics strong {
    display: block;
    color: #fff
}

.hero-metrics span {
    font-size: 12px;
    color: #7697b3
}

.home-hero {
    position: relative;
    overflow: hidden;
    min-height: 700px;
    padding: 92px 0 82px;
    background: radial-gradient(circle at 78% 35%, rgba(22, 125, 255, .20), transparent 31%), radial-gradient(circle at 36% 72%, rgba(90, 54, 230, .17), transparent 32%), #020814;
    border-bottom: 1px solid #153b5e
}

.home-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 54px
}

.home-hero h1 {
    font-size: clamp(35px, 6.6vw, 60px);
    line-height: .91;
    letter-spacing: -.055em;
    margin: .9rem 0 1.2rem;
    color: #f8fcff
}

.home-hero h1 span {
    background: linear-gradient(90deg, #65ddff, #6f94ff, #b68cff);
    -webkit-background-clip: text;
    color: transparent
}

.home-hero p {
    font-size: 16px;
    color: #a8c2da;
    max-width: 760px
}

.tagline {
    margin-top: 24px;
    color: #8ae6ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em
}

.tagline i {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5eddf6;
    margin: 0 8px
}

.hero-system {
    position: relative;
    min-height: 520px
}

.hero-orbit {
    position: absolute;
    width: 370px;
    height: 370px;
    border: 1px solid #25639c;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 80px #07599f33, inset 0 0 80px #6b3cff1e
}

.hero-orbit:before,
.hero-orbit:after {
    content: "";
    position: absolute;
    inset: 38px;
    border: 1px dashed #285680;
    border-radius: 50%
}

.hero-orbit:after {
    inset: 82px
}

.hero-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    background: radial-gradient(circle, #102b62, #07152b 68%);
    border: 1px solid #3f7fcc;
    box-shadow: 0 0 70px #266bd555
}

.hero-core .ico {
    width: 42px;
    height: 42px;
    color: #73dcff
}

.hero-core strong {
    font-size: 16px;
    line-height: 1.05;
    color: #fff;
    margin: .4rem 0
}

.hero-core small {
    font-size: 11px;
    color: #83a9c7
}

.hero-chip {
    position: absolute;
    width: 165px;
    padding: 11px 13px;
    border: 1px solid #235c8d;
    background: #06182ddd;
    border-radius: 12px;
    box-shadow: 0 10px 30px #0006
}

.hero-chip .ico {
    float: left;
    width: 24px;
    height: 24px;
    color: #7cdfff;
    margin-right: 8px
}

.hero-chip strong,
.hero-chip small {
    display: block
}

.hero-chip strong {
    font-size: 12px;
    color: #fff
}

.hero-chip small {
    font-size: 11px;
    color: #7f9db9
}

.hc1 {
    left: 0;
    top: 48px
}

.hc2 {
    right: 0;
    top: 70px;
    border-color: #a45b24
}

.hc3 {
    right: -8px;
    bottom: 80px;
    border-color: #3468a5
}

.hc4 {
    left: 2px;
    bottom: 70px;
    border-color: #16795e
}

.hc5 {
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    border-color: #6b4ba6
}

.section-alt {
    background: #04101f
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(280px, .5fr);
    gap: 38px;
    align-items: end
}

.section-head>p {
    margin: 0
}

.g2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.g3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.g4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.g5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.card-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #0b2948;
    color: #75dfff;
    border: 1px solid #1d527d
}

.card-icon .ico {
    width: 22px;
    height: 22px
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px
}

.card-top h3 {
    margin-right: auto
}

.link-card {
    display: flex;
    flex-direction: column;
    color: inherit
}

.link-card:hover {
    color: inherit
}

.card-link {
    margin-top: auto;
    padding-top: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #76d9ff;
    font-size: 12px;
    font-weight: 700
}

.card-link .ico {
    width: 14px
}

.card-meta {
    margin-top: 12px;
    color: #8aaac4;
    font-size: 12px
}

.bullets {
    padding-left: 1.1rem;
    color: #9eb9d0
}

.bullets li {
    margin: .35rem 0
}

.trust-flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow: auto
}

.trust-node {
    min-width: 130px;
    flex: 1;
    padding: 18px 12px;
    text-align: center;
    border: 1px solid #1b507e;
    border-radius: 13px;
    background: #06182c
}

.trust-node .ico {
    width: 26px;
    height: 26px;
    color: #6fd9fb
}

.trust-node strong {
    display: block;
    margin-top: 6px;
    color: #eff8ff
}

.trust-node small {
    display: block;
    color: #86a5bf;
    font-size: 11px
}

.flow-arrow {
    min-width: 26px;
    display: grid;
    place-items: center;
    color: #54c8f7
}

.formula {
    display: flex;
    align-items: stretch;
    gap: 7px;
    overflow: auto
}

.formula-item {
    min-width: 130px;
    flex: 1;
    padding: 13px;
    border: 1px solid #654e9e;
    border-radius: 12px;
    background: #16112d
}

.formula-item .ico {
    color: #c2aaff
}

.formula-item strong {
    display: block;
    margin-top: 5px;
    color: #efeaff;
    font-size: 12px
}

.formula-op {
    display: grid;
    place-items: center;
    color: #8ca9c4;
    font-weight: 800
}

.formula-item.result {
    border-color: #1a826d;
    background: #082a27
}

.cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    border: 1px solid #24557f;
    border-radius: 20px;
    padding: 32px;
    background: linear-gradient(120deg, #071c34, #121232)
}

.cta h2 {
    margin: .4rem 0;
    color: #fff
}

.cta p {
    max-width: 720px
}

.cta-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.portal-frame {
    display: block
}

.portal-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #153956
}

.portal-toolbar>strong {
    margin: auto
}

.portal-dots {
    display: flex;
    gap: 5px
}

.portal-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27577d
}

.portal-shell {
    display: grid;
    grid-template-columns: 210px 1fr;
    min-height: 520px
}

.portal-shell aside {
    padding: 16px;
    background: #030e1b;
    border-right: 1px solid #163752
}

.portal-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    margin-bottom: 16px
}

.portal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .62rem .7rem;
    color: #8eaac2;
    border-radius: 8px;
    font-size: 12px
}

.portal-nav.active {
    background: #0b2b4c;
    color: #fff
}

.portal-main {
    padding: 18px
}

.ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px
}

.ui-header span {
    font-size: 11px;
    color: #64d7fa;
    letter-spacing: .1em
}

.ui-header h3 {
    margin: .2rem 0;
    color: #fff
}

.ui-header button {
    border: 1px solid #2f74a6;
    background: #0a3559;
    color: #fff;
    border-radius: 8px;
    padding: .6rem .8rem
}

.ui-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin: 16px 0
}

.ui-kpi {
    padding: 12px;
    border: 1px solid #1a456d;
    border-radius: 10px;
    background: #071a2d
}

.ui-kpi>span {
    color: #6cd9fc
}

.ui-kpi strong,
.ui-kpi small {
    display: block
}

.ui-kpi strong {
    font-size: 12px;
    color: #fff
}

.ui-kpi small {
    font-size: 11px;
    color: #7896b0
}

.ui-workspace {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 10px
}

.ui-list,
.ui-detail {
    border: 1px solid #173f61;
    background: #051421;
    border-radius: 11px;
    padding: 13px
}

.ui-list>strong,
.ui-detail>strong {
    color: #fff
}

.ui-list>div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 9px 0;
    border-bottom: 1px solid #12324d;
    font-size: 11px
}

.ui-list em {
    font-size: 11px;
    color: #70cdb1;
    font-style: normal
}

.ui-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #52cbef
}

.ui-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    font-size: 11px
}

.ui-detail-grid span {
    color: #7897b1
}

.ui-detail-grid b {
    color: #e8f7ff
}

.figure-caption {
    padding: 10px 14px;
    margin: 0 !important;
    border-top: 1px solid #153956;
    font-size: 11px;
    color: #7695af !important
}

.assurance-ladder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.assurance-level {
    padding: 16px;
    border: 1px solid #28577d;
    border-radius: 13px;
    background: #06172a
}

.assurance-level strong {
    display: block;
    color: #fff
}

.assurance-level.l3 {
    border-color: #1b8667;
    background: #072923
}

.guardrail-row,
.arch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: 18px;
    align-items: center
}

.proof-copy {
    min-width: 0
}

.evidence-chain {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap
}

.evidence-chain span {
    padding: .48rem .7rem;
    border: 1px solid #265578;
    background: #071a2d;
    border-radius: 999px;
    font-size: 12px
}

.arch-card {
    border: 1px solid #1d4d75;
    background: #061626;
    border-radius: 14px;
    overflow: hidden
}

.arch-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover
}

.arch-card>div:last-child {
    padding: 13px
}

.life-step {
    padding: 14px;
    border: 1px solid #9a5c26;
    background: #241609;
    border-radius: 12px
}

.life-arrow {
    display: grid;
    place-items: center;
    color: #ee9b50
}

.inline-note {
    padding: 12px 14px;
    border-left: 3px solid #48c8ef;
    background: #062133;
    color: #a9cce0
}

.dialog-backdrop[hidden],
.lightbox[hidden] {
    display: none !important
}

.dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: #000b;
    padding: 7vh 20px
}

.dialog-backdrop .search-dialog {
    display: block;
    position: static;
    width: min(850px, 100%);
    max-height: 82vh;
    margin: auto;
    padding: 20px;
    background: #061526;
    border: 1px solid #24577b;
    border-radius: 16px
}

.search-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start
}

.search-head h2 {
    margin: .3rem 0;
    color: #fff
}

.search-input {
    width: 100%;
    padding: .9rem 1rem;
    background: #030f1c;
    color: #fff;
    border: 1px solid #27587c;
    border-radius: 10px
}

.search-results small {
    display: block;
    color: #7f9db9
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #000e;
    display: grid;
    place-items: center;
    padding: 20px
}

.lightbox>button {
    position: absolute;
    right: 25px;
    top: 25px
}

.lightbox img {
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
    background: #fff
}

.reference-architecture {
    color: inherit
}

.lifecycle {
    display: flex;
    align-items: stretch;
    gap: 7px;
    overflow: auto;
    padding-bottom: 6px
}

.life-step {
    min-width: 148px;
    flex: 1;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 8px;
    align-items: center
}

.life-step>span {
    font-size: 11px;
    color: #ffb36c;
    font-weight: 800
}

.life-step .ico {
    width: 20px;
    height: 20px;
    color: #ff9a4b
}

.danger-soft {
    border-color: #7e3843 !important;
    background: linear-gradient(180deg, #24131b, #120a0e) !important
}

.success-soft {
    border-color: #176d5a !important;
    background: linear-gradient(180deg, #09251f, #061511) !important
}

.release-gate {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 14px 0
}

.release-gate span {
    padding: .42rem .58rem;
    border: 1px solid #285b83;
    border-radius: 8px;
    background: #071b30;
    color: #d7efff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em
}

.release-gate .ico {
    width: 15px;
    color: #62d5fb
}

.footer-grid {
    grid-template-columns: 1.35fr repeat(4, minmax(120px, 1fr))
}

.footer-brand img {
    width: min(310px, 100%);
    height: auto
}

.footer-brand p {
    max-width: 360px;
    color: #86a2bc
}

.footer-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    background: #04111f
}

.table-wrap table caption {
    text-align: left;
    padding: 12px;
    color: #88a8c5
}

.table-wrap table th,
.table-wrap table td {
    padding: 11px 12px;
    border-bottom: 1px solid #12324f;
    vertical-align: top;
    text-align: left;
    font-size: 14px
}

.table-wrap table th {
    position: sticky;
    top: 0;
    background: #08203a;
    color: #c7eeff
}

.table-wrap table td {
    color: #acc4d8
}

.evidence-chain>div {
    padding: .58rem .72rem;
    border: 1px solid #5d4b92;
    background: #15112b;
    border-radius: 9px;
    color: #eee6ff;
    font-size: 12px;
    font-weight: 800
}

.evidence-chain>span {
    border: 0;
    background: transparent;
    padding: 0
}

.proof-grid .evidence-chain {
    justify-content: center
}

.architecture-invariant,
.governed-vocabulary,
.public-dataset,
.public-downloads,
.public-policy,
.reference-contract,
.reference-contracts,
.reference-library,
.reference-scenario,
.reference-scenarios,
.reference-solution,
.reference-solutions,
.release-snapshot,
.enterprise-workshop {
    --semantic-status: 1
}

@media(max-width:1100px) {
    .primary-nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 16px;
        right: 16px;
        padding: 10px;
        background: #061426;
        border: 1px solid #1c4e79;
        border-radius: 14px;
        flex-direction: column
    }

    .primary-nav.open {
        display: flex
    }

    .mobile-menu {
        display: inline-flex
    }

    .nav-item {
        width: 100%
    }

    .nav-trigger {
        width: 100%;
        justify-content: space-between
    }

    .mega {
        position: static;
        min-width: 0;
        grid-template-columns: 1fr 1fr;
        box-shadow: none
    }

    .home-hero-grid {
        grid-template-columns: 1fr
    }

    .hero-system {
        min-height: 460px;
        max-width: 650px;
        width: 100%;
        margin: auto
    }

    .g5 {
        grid-template-columns: repeat(3, 1fr)
    }

    .ui-kpis {
        grid-template-columns: repeat(2, 1fr)
    }

    .section-head {
        grid-template-columns: 1fr
    }

    .assurance-ladder {
        grid-template-columns: repeat(2, 1fr)
    }

    .proof-grid {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media(max-width:700px) {
    .statusbar .shell>span:first-child {
        display: none
    }

    .nav-shell {
        min-height: 64px
    }

    .brand img {
        width: 205px
    }

    .primary-nav {
        top: 64px
    }

    .home-hero {
        padding-top: 58px;
        min-height: auto
    }

    .home-hero h1 {
        font-size: clamp(35px, 13vw, 60px)
    }

    .hero-system {
        min-height: 400px;
        transform: scale(.88);
        margin-top: -20px;
        margin-bottom: -30px
    }

    .hero-chip {
        width: 145px
    }

    .hc2,
    .hc3 {
        right: 0
    }

    .g2,
    .g3,
    .g4,
    .g5,
    .hero-metrics,
    .assurance-ladder,
    .guardrail-row,
    .proof-grid,
    .arch-grid {
        grid-template-columns: 1fr
    }

    .lifecycle {
        padding-bottom: 10px
    }

    .life-step {
        min-width: 170px
    }

    .cta {
        grid-template-columns: 1fr
    }

    .portal-shell {
        grid-template-columns: 1fr
    }

    .portal-shell aside {
        display: none
    }

    .ui-kpis,
    .ui-workspace {
        grid-template-columns: 1fr
    }

    .trust-flow,
    .formula {
        padding-bottom: 8px
    }

    .trust-node {
        min-width: 160px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .section-head {
        gap: 8px
    }

    .page-hero {
        padding-top: 24px
    }

    .home-hero-grid {
        gap: 18px
    }
}

/* Visual + bilingual production refinement */
.shell {
    width: min(1480px, calc(100% - 48px))
}

.statusbar {
    border-bottom: 1px solid #0e2b47;
    background: #020b16;
    color: #86a7c3;
    font-size: 12px
}

.statusbar .shell {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.statusbar-proof {
    font-size: 11px;
    letter-spacing: .14em;
    color: #55c9ee;
    font-weight: 800
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: rgba(2, 10, 20, .96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #153856
}

.nav-shell {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 18px
}

.brand {
    flex: 0 0 auto
}

.brand img {
    width: 255px;
    max-width: 255px;
    height: auto;
    display: block
}

.primary-nav {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin-left: auto;
    min-width: 0
}

.nav-item {
    position: static;
    display: flex;
    align-items: center
}

.nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-height: 46px;
    padding: .62rem .67rem;
    border: 0;
    background: transparent;
    color: #cce1f3;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    border-radius: 9px;
    cursor: pointer
}

.nav-trigger .ico {
    width: 13px;
    height: 13px;
    transition: transform .18s ease
}

.nav-trigger:hover,
.nav-trigger.active,
.nav-item.active>.nav-trigger {
    background: #08213a;
    color: #fff
}

.nav-item.open>.nav-trigger .ico {
    transform: rotate(180deg)
}

.mega-shell {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    z-index: 150;
    padding: 18px;
    border: 1px solid #1d5077;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #06182b 0%, #03111f 100%);
    box-shadow: 0 26px 65px #0009
}

.nav-item.open>.mega-shell {
    display: block
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px
}

.mega-group {
    min-width: 0;
    padding: 4px 7px
}

.mega-group-title {
    display: block;
    margin: 0 0 7px;
    color: #62d4f7;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .14em
}

.mega-link {
    display: block;
    padding: 9px 10px;
    border-radius: 10px;
    color: #dcedfa
}

.mega-link:hover {
    background: #0a2945;
    color: #fff
}

.mega-link strong {
    display: block;
    font-size: 12px;
    line-height: 1.25
}

.mega-link span {
    display: block;
    margin-top: 3px;
    color: #7f9fba;
    font-size: 11px;
    line-height: 1.35
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto
}

.utility-button {
    width: 40px;
    height: 40px
}

.language-switcher {
    position: relative
}

.language-trigger {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 0 10px;
    border: 1px solid #1d4c70;
    background: #06182a;
    color: #dbeeff;
    border-radius: 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.language-trigger>.ico:first-child {
    color: #64d5f8
}

.language-trigger>.ico:last-child {
    width: 12px;
    height: 12px
}

.language-switcher.open .language-trigger>.ico:last-child {
    transform: rotate(180deg)
}

.language-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    padding: 9px;
    border: 1px solid #24577f;
    background: #061628;
    border-radius: 12px;
    box-shadow: 0 18px 42px #0009;
    z-index: 180
}

.language-switcher.open .language-menu {
    display: grid
}

.language-menu-title {
    padding: 6px 9px;
    color: #678ca9;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase
}

.language-menu a {
    padding: 9px;
    border-radius: 8px;
    color: #cce3f5;
    font-size: 12px
}

.language-menu a:hover,
.language-menu a.current {
    background: #0b2a49;
    color: #fff
}

.contact-button {
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center
}

.button.compact {
    padding: .62rem .82rem;
    font-size: 12px
}

.mobile-nav-utility {
    display: none
}

.search-scope {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    color: #93b1c8;
    font-size: 12px
}

.search-scope input {
    accent-color: #55d2f5
}

.assurance-ladder {
    gap: 12px
}

.assurance-level {
    position: relative;
    min-height: 225px;
    padding: 19px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #071b31, #041221);
    border-color: #285b80
}

.assurance-level::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: #315d7c
}

.assurance-level.l1::after {
    background: #317fc4
}

.assurance-level.l2::after {
    background: #4d8fe9
}

.assurance-level.l3::after {
    background: #25a87d
}

.assurance-level-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px
}

.assurance-level-head>span {
    font-size: 16px;
    font-weight: 850;
    color: #dceeff;
    letter-spacing: .06em
}

.assurance-level-head .ico {
    width: 27px;
    height: 27px;
    color: #83cfee
}

.assurance-level h3 {
    margin: .2rem 0 .85rem;
    color: #e7f3ff;
    font-size: 16px;
    line-height: 1.35
}

.assurance-level p {
    margin: 0;
    color: #91acc3;
    line-height: 1.5
}

.assurance-level.l3 {
    border-color: #168866;
    background: linear-gradient(180deg, #07342d, #04231f)
}

.assurance-level.l3 .ico {
    color: #58dab4
}

.assurance-meter {
    position: absolute;
    left: 19px;
    right: 19px;
    bottom: 16px;
    height: 4px;
    background: #0e324c;
    border-radius: 99px;
    overflow: hidden
}

.assurance-meter i {
    display: block;
    height: 100%;
    width: 25%;
    background: #5ca6d5
}

.assurance-level.l1 .assurance-meter i {
    width: 50%
}

.assurance-level.l2 .assurance-meter i {
    width: 75%
}

.assurance-level.l3 .assurance-meter i {
    width: 100%;
    background: #43c39a
}

.device-trust-invariant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-top: 16px
}

.invariant-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border: 1px solid #235271;
    border-radius: 13px;
    background: #071827
}

.invariant-card .ico {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    color: #75d7f5
}

.invariant-card strong,
.invariant-card span {
    display: block
}

.invariant-card strong {
    color: #edf8ff
}

.invariant-card span {
    margin-top: 3px;
    color: #7f9db5;
    font-size: 11px
}

.invariant-not-equal {
    display: grid;
    place-items: center;
    color: #b5cde0;
    font-size: 22px;
    font-weight: 850
}

.experience-visual {
    margin: -2px -2px 14px;
    padding: 11px;
    border: 1px solid #183f60;
    border-radius: 11px;
    background: linear-gradient(145deg, #061b31, #071323)
}

.experience-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #8cabc3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em
}

.experience-visual-top small {
    color: #62d3f5;
    font-size: 11px
}

.experience-visual-body {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: center;
    margin: 15px 0 10px
}

.experience-visual-icon {
    width: 42px;
    height: 42px;
    border: 1px solid #28648c;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #79ddfa;
    background: #082641
}

.experience-visual-lines {
    display: grid;
    gap: 6px
}

.experience-visual-lines i {
    display: block;
    height: 7px;
    border-radius: 5px;
    background: #123d5d
}

.experience-visual-lines i:nth-child(2) {
    width: 82%
}

.experience-visual-lines i:nth-child(3) {
    width: 64%
}

.experience-visual-actions {
    padding-top: 8px;
    border-top: 1px solid #143957;
    color: #92adc1;
    font-size: 11px
}

.visual-reference-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #265777;
    border-radius: 12px;
    background: #071b2c
}

.visual-reference-banner>.ico {
    width: 24px;
    height: 24px;
    color: #62d7f7
}

.visual-reference-banner strong,
.visual-reference-banner span {
    display: block
}

.visual-reference-banner strong {
    color: #eef9ff
}

.visual-reference-banner span {
    margin-top: 2px;
    color: #819fb8;
    font-size: 11px
}

.portal-frame {
    border-color: #245a7c;
    box-shadow: 0 18px 45px #0004
}

@media(max-width:1280px) {
    .shell {
        width: min(100% - 32px, 1180px)
    }

    .brand img {
        width: 225px
    }

    .primary-nav {
        display: none;
        position: absolute;
        top: calc(100% - 1px);
        left: 0;
        right: 0;
        max-height: calc(100vh - 100px);
        overflow: auto;
        padding: 10px;
        background: #061426;
        border: 1px solid #1c4e79;
        border-radius: 0 0 14px 14px;
        flex-direction: column;
        align-items: stretch
    }

    .primary-nav.open {
        display: flex
    }

    .mobile-menu {
        display: inline-flex
    }

    .nav-item {
        display: block;
        width: 100%
    }

    .nav-trigger {
        width: 100%;
        justify-content: space-between
    }

    .mega-shell {
        position: static;
        padding: 8px 0 10px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .mega-group {
        padding: 5px 8px;
        border-left: 1px solid #184260
    }

    .mobile-nav-utility {
        display: grid;
        gap: 9px;
        padding: 12px 8px 6px;
        border-top: 1px solid #173d5b
    }

    .mobile-language {
        display: flex;
        gap: 7px;
        align-items: center;
        flex-wrap: wrap;
        color: #7899b4;
        font-size: 12px
    }

    .mobile-language>a {
        padding: 7px 9px;
        border: 1px solid #234f70;
        border-radius: 8px;
        color: #c7dff1
    }

    .mobile-language>a.current {
        background: #0a2946;
        color: #fff
    }

    .contact-button,
    .language-switcher {
        display: none
    }
}

@media(max-width:700px) {
    .shell {
        width: min(100% - 24px, 100%)
    }

    .statusbar-proof {
        display: none
    }

    .statusbar .shell {
        justify-content: flex-start
    }

    .nav-shell {
        min-height: 66px;
        gap: 9px
    }

    .brand img {
        width: 190px
    }

    .header-actions {
        margin-left: auto
    }

    .mega-grid {
        grid-template-columns: 1fr
    }

    .assurance-ladder {
        grid-template-columns: 1fr
    }

    .assurance-level {
        min-height: 190px
    }

    .device-trust-invariant {
        grid-template-columns: 1fr
    }

    .invariant-not-equal {
        min-height: 26px
    }
}


@media(min-width:1281px) {

    .nav-item:nth-child(2) .mega-grid,
    .nav-item:nth-child(3) .mega-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
}

/* PRODUCT COMPLETE 9.9+ */
:root {
    --pc-cyan: #62d9ff;
    --pc-blue: #2c91e8;
    --pc-teal: #1fc7bd;
    --pc-violet: #8a6df4;
    --pc-amber: #ff9f43;
    --pc-green: #39d49a;
    --pc-steel: #88a4bd
}

.nav-trigger.active {
    background: rgba(64, 164, 222, .085) !important;
    border-color: rgba(77, 184, 239, .16) !important;
    box-shadow: inset 0 -2px 0 rgba(90, 213, 250, .85) !important
}

.nav-trigger {
    padding: .72rem .84rem !important;
    border-radius: 10px !important
}

.primary-nav {
    gap: .15rem !important
}

.footer-contact {
    display: grid;
    gap: .34rem;
    margin-top: 1rem;
    font-size: 12px;
    color: var(--muted, #9fb7ca)
}

.footer-contact a {
    color: inherit
}

.product-footer-grid {
    grid-template-columns: minmax(280px, 1.6fr) repeat(4, minmax(130px, .75fr)) !important
}

.footer-bottom-rich {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .55rem 1.25rem !important
}

.back-top {
    margin-left: auto;
    color: #74ddff;
    text-decoration: none
}

.product-family-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.family-card {
    position: relative;
    border: 1px solid rgba(91, 180, 238, .25);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(7, 29, 50, .96), rgba(4, 17, 31, .98));
    padding: 20px;
    overflow: hidden
}

.family-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pc-blue)
}

.family-identity:before {
    background: var(--pc-teal)
}

.family-dpp:before {
    background: var(--pc-amber)
}

.family-core:before {
    background: var(--pc-violet)
}

.family-governance:before {
    background: #a875ff
}

.family-evidence:before {
    background: var(--pc-cyan)
}

.family-device:before {
    background: var(--pc-green)
}

.family-integration:before {
    background: #4bbcf5
}

.family-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.family-code {
    font-weight: 900;
    font-size: 12px;
    color: #71dcff
}

.family-card h3 {
    font-size: 16px;
    margin: .8rem 0 .45rem
}

.family-card p {
    font-size: 14px
}

.compact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 14px 0
}

.compact-list li {
    font-size: 12px;
    border: 1px solid rgba(118, 173, 213, .22);
    background: rgba(17, 50, 76, .55);
    padding: 6px 8px;
    border-radius: 999px
}

.mini-dl {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 6px 10px;
    margin: 14px 0 0;
    font-size: 12px
}

.mini-dl dt {
    color: #70d9f8;
    text-transform: uppercase;
    font-weight: 800
}

.mini-dl dd {
    margin: 0;
    color: #c9d9e6
}

.section-actions,
.download-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px
}

.layered-architecture {
    display: grid;
    gap: 10px
}

.layer {
    border: 1px solid rgba(90, 178, 235, .28);
    border-radius: 18px;
    padding: 18px;
    background: rgba(5, 22, 39, .82)
}

.source-layer {
    border-color: rgba(142, 166, 188, .36)
}

.control-layer {
    border-color: rgba(123, 105, 245, .55);
    background: linear-gradient(90deg, rgba(30, 42, 101, .66), rgba(7, 31, 52, .82))
}

.experience-layer {
    border-color: rgba(74, 193, 234, .36)
}

.layer-label {
    font-size: 11px;
    letter-spacing: .13em;
    font-weight: 900;
    color: #78dcfb
}

.layer-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0
}

.layer-items span {
    padding: 9px 11px;
    border-radius: 10px;
    background: #081a2d;
    border: 1px solid rgba(106, 171, 216, .28);
    font-size: 14px;
    font-weight: 700
}

.layer p {
    margin: .5rem 0 0;
    font-size: 12px
}

.layer-arrow {
    text-align: center;
    color: #65d9ff;
    font-size: 22px;
    line-height: 1
}

.lifecycle-control-plane {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding: 4px 1px 14px
}

.lifecycle-card {
    min-width: 160px;
    border: 1px solid rgba(255, 159, 67, .42);
    border-radius: 16px;
    padding: 15px;
    background: linear-gradient(180deg, rgba(67, 34, 12, .58), rgba(22, 18, 21, .78))
}

.lifecycle-card:nth-child(4) {
    border-color: rgba(146, 171, 190, .55);
    background: rgba(18, 31, 43, .85)
}

.lifecycle-card:nth-child(5) {
    border-color: rgba(57, 212, 154, .5);
    background: rgba(8, 45, 36, .72)
}

.lifecycle-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #ffad60;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em
}

.lifecycle-card h3 {
    font-size: 16px;
    margin: .7rem 0
}

.lifecycle-card ul {
    padding-left: 1rem;
    margin: 0;
    color: #a9bfd1;
    font-size: 12px
}

.lifecycle-legend {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: #9fb5c6
}

.internal-dot,
.external-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff9f43;
    display: inline-block
}

.external-dot {
    background: #8fa9bd;
    margin-left: 8px
}

.integration-boundary {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 16px;
    align-items: center
}

.ib-col {
    border: 1px solid rgba(91, 188, 236, .35);
    border-radius: 18px;
    padding: 26px;
    text-align: center;
    background: #071b2e
}

.ib-col.external {
    border-style: dashed;
    border-color: rgba(149, 169, 188, .5)
}

.ib-label {
    display: block;
    font-size: 11px;
    letter-spacing: .12em;
    color: #69d9fb;
    margin-bottom: 9px;
    font-weight: 900
}

.ib-gate {
    text-align: center;
    font-size: 35px;
    color: #65d9ff
}

.ib-gate small {
    display: block;
    font-size: 11px;
    color: #91aabd
}

.invariant-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 15px
}

.invariant-row span {
    border: 1px solid rgba(119, 174, 215, .25);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 800
}

.readiness-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.readiness-chip {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(88, 176, 229, .24);
    border-radius: 12px;
    padding: 12px;
    background: #071a2c
}

.readiness-chip span {
    font-size: 11px;
    color: #70dbfb;
    font-weight: 900;
    letter-spacing: .06em
}

.html-first-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-left: 3px solid #5dd9fc;
    background: rgba(7, 34, 55, .75);
    padding: 14px 16px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 22px
}

.html-first-banner strong {
    color: #6edcff;
    white-space: nowrap
}

.html-first-banner span {
    color: #c5d6e3
}

.completeness-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.completeness-grid article {
    border: 1px solid rgba(100, 177, 226, .23);
    border-radius: 13px;
    padding: 14px;
    background: #07192a
}

.completeness-grid span {
    display: block;
    color: #70dbfb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em
}

.completeness-grid strong {
    display: block;
    margin-top: 7px;
    font-size: 14px
}

.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px
}

.table-controls input {
    width: min(480px, 100%);
    background: #061728;
    color: #dff4ff;
    border: 1px solid #2a5272;
    border-radius: 10px;
    padding: 11px 12px
}

.table-count {
    font-size: 12px;
    color: #8fa9bc
}

.governance-table tbody tr[hidden] {
    display: none
}

.api-op-list {
    display: grid;
    gap: 16px
}

.api-op-card {
    border: 1px solid rgba(91, 181, 234, .28);
    border-radius: 17px;
    padding: 20px;
    background: linear-gradient(180deg, rgba(7, 28, 48, .96), rgba(4, 17, 30, .98))
}

.api-method-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.method {
    font-size: 11px;
    font-weight: 900;
    border-radius: 7px;
    padding: 5px 8px;
    letter-spacing: .06em
}

.method.get {
    background: rgba(55, 193, 229, .16);
    color: #68ddff;
    border: 1px solid rgba(74, 201, 240, .34)
}

.method.post {
    background: rgba(57, 212, 154, .14);
    color: #78e6b9;
    border: 1px solid rgba(57, 212, 154, .3)
}

.api-method-row code {
    font-size: 14px;
    color: #d7ebf9
}

.api-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.api-meta-grid dl {
    display: grid;
    grid-template-columns: 115px 1fr;
    gap: 7px 10px;
    font-size: 12px
}

.api-meta-grid dt {
    font-weight: 900;
    color: #67d8fa;
    text-transform: uppercase
}

.api-meta-grid dd {
    margin: 0;
    color: #c2d5e3
}

.api-op-card details {
    margin-top: 14px
}

.api-op-card summary {
    cursor: pointer;
    font-weight: 800;
    color: #77dcfb
}

.code-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px
}

.code-grid pre,
.api-explorer pre {
    overflow: auto;
    background: #020b13;
    border: 1px solid #173c59;
    border-radius: 11px;
    padding: 13px;
    color: #cdeeff;
    font-size: 12px;
    white-space: pre-wrap
}

.code-label {
    display: block;
    color: #6dd9fa;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    margin-bottom: 5px
}

.api-explorer {
    border: 1px solid rgba(103, 178, 227, .28);
    border-radius: 18px;
    padding: 18px;
    background: #061729
}

.api-explorer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap
}

.api-explorer-toolbar label {
    display: grid;
    gap: 6px;
    color: #8fb2c8
}

.api-explorer select,
.api-explorer textarea {
    background: #020d17;
    color: #e1f4ff;
    border: 1px solid #284c68;
    border-radius: 9px;
    padding: 10px;
    width: 100%
}

.api-explorer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px
}

.artifact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px
}

.artifact-card {
    border: 1px solid rgba(89, 177, 231, .25);
    border-radius: 15px;
    padding: 17px;
    background: #06182a;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center
}

.artifact-card h3 {
    margin: .35rem 0
}

.artifact-card p {
    margin: 0;
    font-size: 12px
}

.artifact-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

@media(max-width:1180px) {
    .product-footer-grid {
        grid-template-columns: 1.4fr repeat(2, 1fr) !important
    }

    .product-family-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .lifecycle-control-plane {
        grid-template-columns: repeat(4, minmax(200px, 1fr))
    }

    .readiness-strip {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:800px) {

    .product-family-grid,
    .completeness-grid,
    .api-meta-grid,
    .code-grid,
    .api-explorer-grid,
    .artifact-grid {
        grid-template-columns: 1fr
    }

    .product-footer-grid {
        grid-template-columns: 1fr 1fr !important
    }

    .integration-boundary {
        grid-template-columns: 1fr
    }

    .ib-gate {
        transform: rotate(90deg)
    }

    .artifact-card {
        align-items: flex-start;
        flex-direction: column
    }

    .artifact-actions {
        justify-content: flex-start
    }

    .lifecycle-control-plane {
        grid-template-columns: 1fr 1fr
    }

    .readiness-strip {
        grid-template-columns: 1fr
    }
}

@media(max-width:520px) {
    .product-footer-grid {
        grid-template-columns: 1fr !important
    }

    .lifecycle-control-plane {
        grid-template-columns: 1fr
    }

    .mini-dl,
    .api-meta-grid dl {
        grid-template-columns: 1fr
    }

    .html-first-banner {
        flex-direction: column
    }

    .nav-trigger {
        padding: .6rem .7rem !important
    }
}

/* ACTUAL PRODUCT UI INTEGRATION */
.product-ui-section {
    position: relative;
    overflow: hidden
}

.product-ui-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px
}

.product-ui-card {
    grid-column: span 4;
    background: linear-gradient(180deg, rgba(8, 31, 52, .96), rgba(4, 19, 34, .98));
    border: 1px solid rgba(85, 181, 236, .28);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .24)
}

.product-ui-card.featured {
    grid-column: span 6
}

.product-ui-media {
    display: block;
    position: relative;
    background: #eaf2f7;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-bottom: 1px solid rgba(85, 181, 236, .18)
}

.product-ui-media.mobile {
    aspect-ratio: 9/16;
    max-height: 590px;
    background: #edf4f8
}

.product-ui-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.product-ui-meta {
    padding: 16px 17px 18px
}

.product-ui-meta .eyebrow {
    font-size: 12px;
    letter-spacing: .11em;
    color: #58d6f8;
    font-weight: 800
}

.product-ui-meta h3 {
    font-size: 16px;
    margin: .45rem 0 .35rem
}

.product-ui-meta p {
    font-size: 14px;
    margin: 0;
    color: var(--muted, #9fb7ca)
}

.product-ui-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px
}

.product-ui-gallery .product-ui-card {
    grid-column: auto
}

.product-ui-gallery .product-ui-card.mobile-card {
    max-width: 520px;
    justify-self: center;
    width: 100%
}

.product-ui-explainer {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    gap: 28px;
    align-items: start
}

.product-ui-trace {
    border: 1px solid rgba(85, 181, 236, .22);
    border-radius: 16px;
    padding: 18px;
    background: rgba(7, 26, 44, .72);
    position: sticky;
    top: 86px
}

.product-ui-trace dl {
    display: grid;
    grid-template-columns: 125px 1fr;
    gap: 10px 12px;
    margin: 0
}

.product-ui-trace dt {
    font-size: 12px;
    color: #6fdcff;
    text-transform: uppercase;
    font-weight: 800
}

.product-ui-trace dd {
    margin: 0;
    color: #d8e8f5;
    font-size: 14px
}

.product-ui-provenance {
    font-size: 12px;
    color: #87a5ba;
    margin-top: 10px
}

.product-ui-frame {
    padding: 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(66, 178, 236, .15), rgba(120, 91, 255, .1));
    border: 1px solid rgba(78, 169, 225, .25)
}

.product-ui-frame .product-ui-media {
    border-radius: 11px;
    border: 1px solid rgba(14, 37, 52, .25)
}

@media(max-width:980px) {

    .product-ui-card,
    .product-ui-card.featured {
        grid-column: span 6
    }

    .product-ui-explainer {
        grid-template-columns: 1fr
    }

    .product-ui-trace {
        position: static
    }

    .product-ui-gallery {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:680px) {

    .product-ui-card,
    .product-ui-card.featured {
        grid-column: 1/-1
    }

    .product-ui-gallery {
        grid-template-columns: 1fr
    }

    .product-ui-mosaic {
        gap: 14px
    }

    .product-ui-meta {
        padding: 13px
    }

    .product-ui-frame {
        padding: 7px
    }
}

/* ENTERPRISE PRODUCT FINAL 9.9+ */
.nav-trigger {
    padding: .58rem .72rem !important;
    border-radius: 8px !important;
    font-size: 14px !important
}

.nav-trigger.active {
    background: rgba(62, 151, 205, .07) !important;
    box-shadow: inset 0 -2px 0 #5bd7fa !important
}

.product-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.product-profile-card,
.readiness-passport-card,
.connector-profile,
.profile-panel {
    border: 1px solid rgba(91, 180, 238, .24);
    border-radius: 17px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(7, 28, 48, .97), rgba(4, 17, 30, .99))
}

.product-profile-card h3,
.readiness-passport-card h3,
.connector-profile h3 {
    margin: .75rem 0 .45rem;
    font-size: 16px
}

.product-profile-card p,
.readiness-passport-card p {
    font-size: 14px
}

.profile-dl {
    display: grid;
    grid-template-columns: minmax(110px, .34fr) 1fr;
    gap: 9px 13px;
    margin: 0
}

.profile-dl dt {
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #68dafa;
    font-weight: 900
}

.profile-dl dd {
    margin: 0;
    color: #c9dce9;
    font-size: 14px
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 24px
}

.profile-list {
    padding-left: 1.1rem
}

.decision-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 9px
}

.decision-step {
    min-height: 90px;
    border: 1px solid rgba(91, 180, 238, .22);
    border-radius: 13px;
    padding: 13px;
    background: #071a2d;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.decision-step span {
    color: #63d9fb;
    font-weight: 900;
    font-size: 11px
}

.decision-step strong {
    font-size: 14px
}

.document-control {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 26px
}

.document-control>div {
    border: 1px solid rgba(91, 180, 238, .22);
    background: #061727;
    border-radius: 11px;
    padding: 11px
}

.document-control span,
.passport-grid span {
    display: block;
    font-size: 11px;
    letter-spacing: .09em;
    color: #71dcff;
    font-weight: 900
}

.document-control strong,
.passport-grid strong {
    display: block;
    margin-top: 5px;
    font-size: 12px
}

.passport-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px
}

.passport-grid>div {
    border: 1px solid rgba(90, 180, 233, .2);
    border-radius: 12px;
    padding: 13px;
    background: #07192a
}

.decision-ui-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

.decision-ui {
    border: 1px solid rgba(91, 180, 238, .24);
    border-radius: 15px;
    padding: 8px;
    background: #061727
}

.decision-ui-meta {
    padding: 10px 7px 6px;
    display: grid;
    gap: 3px
}

.decision-ui-meta strong {
    font-size: 14px
}

.decision-ui-meta span {
    font-size: 11px;
    color: #88a9bf
}

.readiness-passport-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
}

.connector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px
}

.enterprise-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px
}

.actual-ui-proof {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    border-left: 3px solid #38d39f;
    padding: 13px 16px;
    background: rgba(7, 42, 35, .55);
    border-radius: 0 11px 11px 0
}

.actual-ui-proof strong {
    color: #6ce4b6;
    white-space: nowrap
}

.actual-ui-proof span {
    font-size: 14px;
    color: #c5d9d1
}

.product-ui-media {
    width: 100%;
    border: 0;
    padding: 0;
    cursor: zoom-in
}

.text-link {
    display: inline-block;
    margin-top: 12px;
    color: #68dafb;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px
}

@media(max-width:1050px) {

    .product-profile-grid,
    .readiness-passport-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .document-control {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .passport-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:720px) {

    .product-profile-grid,
    .readiness-passport-grid,
    .connector-grid,
    .profile-grid,
    .decision-ui-grid {
        grid-template-columns: 1fr
    }

    .document-control,
    .passport-grid {
        grid-template-columns: 1fr
    }

    .actual-ui-proof {
        align-items: flex-start;
        flex-direction: column
    }

    .profile-dl {
        grid-template-columns: 1fr
    }

    .profile-dl dt {
        margin-top: 5px
    }
}

/* PORTAL PRODUCT ECOSYSTEM 9.9+ */
.nav-shell {
    width: min(1500px, calc(100% - 32px));
}

.brand img {
    width: 220px
}

.nav-trigger {
    font-size: 14px !important;
    white-space: nowrap
}

.mega-shell {
    width: min(1120px, calc(100vw - 48px));
    right: auto;
    left: 50%;
    transform: translateX(-50%)
}

.nav-item:nth-child(3) .mega-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
}

.product-footer-grid {
    grid-template-columns: minmax(260px, 1.45fr) repeat(5, minmax(120px, .72fr)) !important
}

.portal-suite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.portal-suite-card {
    overflow: hidden;
    border: 1px solid rgba(91, 180, 238, .26);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(7, 29, 50, .98), rgba(4, 17, 31, .99));
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18)
}

.portal-suite-media {
    display: block;
    background: #eaf2f7;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-bottom: 1px solid rgba(91, 180, 238, .18)
}

button.portal-suite-media {
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(91, 180, 238, .18);
    border-radius: 0;
    cursor: zoom-in;
    font: inherit;
    text-align: left;
    color: inherit
}

.portal-suite-media picture,
.portal-suite-media img {
    display: block;
    width: 100%;
    height: 100%
}

.portal-suite-media img {
    object-fit: contain
}

.portal-suite-body {
    padding: 17px
}

.portal-suite-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.portal-code {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    color: #66dbfc
}

.portal-suite-body h3 {
    margin: .75rem 0 .35rem;
    font-size: 16px;
    color: #f3f9ff
}

.portal-role {
    font-size: 12px !important;
    color: #7ddcff !important
}

.portal-suite-body ul {
    margin: .75rem 0 0;
    padding-left: 1.05rem;
    color: #9fb8cb;
    font-size: 12px
}

.portal-family {
    margin: 0 0 38px
}

.portal-family-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(91, 180, 238, .16)
}

.portal-family-head>span:last-child {
    font-size: 12px;
    color: #7d9bb3
}

.portal-hub-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
    max-width: 760px
}

.portal-hub-metrics>div {
    border: 1px solid rgba(91, 180, 238, .25);
    border-radius: 12px;
    padding: 12px;
    background: #06182b
}

.portal-hub-metrics strong {
    display: block;
    font-size: 22px;
    color: #fff
}

.portal-hub-metrics span {
    font-size: 12px;
    color: #89a6bd
}

.portal-platform-map {
    display: grid;
    grid-template-columns: 1fr 50px 1.2fr 50px 1fr;
    gap: 12px;
    align-items: center
}

.portal-platform-map>div {
    border: 1px solid rgba(91, 180, 238, .26);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    background: #07192b
}

.portal-platform-map .core {
    border-color: rgba(133, 105, 245, .5);
    background: linear-gradient(135deg, rgba(30, 42, 101, .72), rgba(7, 31, 52, .92))
}

.portal-platform-map b {
    text-align: center;
    color: #65d9ff;
    font-size: 22px
}

.portal-platform-map strong,
.portal-platform-map span {
    display: block
}

.portal-platform-map span {
    font-size: 12px;
    color: #93aec2;
    margin-top: 5px
}

.portal-navigator {
    position: sticky;
    top: 72px;
    z-index: 80;
    background: rgba(3, 12, 23, .95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(75, 154, 203, .2);
    padding: 10px 0
}

.portal-nav-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 11px;
    letter-spacing: .08em
}

.portal-nav-head strong {
    color: #6edcff
}

.portal-nav-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin
}

.portal-nav-link {
    white-space: nowrap;
    display: flex;
    gap: 7px;
    align-items: center;
    border: 1px solid rgba(90, 161, 208, .2);
    border-radius: 999px;
    padding: 7px 10px;
    color: #9fb8cb;
    font-size: 12px
}

.portal-nav-link span {
    font-weight: 900;
    color: #63d9fb
}

.portal-nav-link.current {
    background: #0a2a47;
    border-color: #4ab6e7;
    color: #fff
}

.portal-workflow {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px
}

.portal-workflow a {
    min-width: 135px;
    flex: 1;
    border: 1px solid rgba(91, 180, 238, .24);
    border-radius: 14px;
    background: #06182a;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #dbe9f5
}

.portal-workflow a span {
    font-size: 11px;
    color: #66dbfc;
    font-weight: 900
}

.portal-workflow a strong {
    font-size: 12px
}

.related-portals-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.related-portal-card {
    border: 1px solid rgba(91, 180, 238, .24);
    border-radius: 16px;
    padding: 18px;
    background: #06182a
}

.related-portal-card>span {
    font-size: 11px;
    font-weight: 900;
    color: #6edcff
}

.role-entry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.role-entry-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'id strong' 'id small';
    gap: 2px 10px;
    border: 1px solid rgba(91, 180, 238, .22);
    border-radius: 14px;
    padding: 14px;
    background: #06182a;
    color: #dcebf6
}

.role-entry-card>span {
    grid-area: id;
    align-self: center;
    color: #69dbfc;
    font-weight: 900
}

.role-entry-card>strong {
    grid-area: strong;
    font-size: 14px
}

.role-entry-card>small {
    grid-area: small;
    color: #8faec4
}

.hero-product-stack {
    position: relative;
    min-height: 540px
}

.hero-product-glow {
    position: absolute;
    inset: 12% 12%;
    background: radial-gradient(circle, rgba(29, 145, 239, .28), transparent 62%);
    filter: blur(30px)
}

.hero-product-screen {
    position: absolute;
    display: block;
    width: 74%;
    border: 1px solid rgba(98, 205, 248, .35);
    border-radius: 16px;
    overflow: hidden;
    background: #edf4f8;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .46);
    transition: .25s
}

.hero-product-screen:hover {
    transform: translateY(-4px);
    z-index: 10
}

.hero-product-screen picture,
.hero-product-img {
    display: block;
    width: 100%
}

.hero-product-screen span {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #06192a;
    color: #dff5ff;
    padding: 9px 11px;
    font-size: 12px
}

.hero-product-screen span b {
    color: #6edcff
}

.hps-s03 {
    left: 5%;
    top: 8%;
    z-index: 3
}

.hps-s01 {
    width: 36%;
    right: 2%;
    top: 62%;
    transform: translateY(-50%);
    z-index: 4
}

.hps-s01:hover {
    transform: translateY(calc(-50% - 4px))
}

.hps-s07 {
    width: 58%;
    left: 13%;
    bottom: 8%;
    z-index: 2
}

.hero-product-caption {
    position: absolute;
    right: 0;
    top: 8%;
    z-index: 6;
    border: 1px solid rgba(91, 180, 238, .3);
    border-radius: 12px;
    padding: 10px 12px;
    background: #051627e8
}

.hero-product-caption strong,
.hero-product-caption span {
    display: block
}

.hero-product-caption strong {
    color: #6edcff
}

.hero-product-caption span {
    font-size: 11px;
    color: #9cb6ca
}

.product-suite-feature {
    display: grid;
    grid-template-columns: 1fr minmax(300px, .8fr);
    gap: 24px;
    align-items: center
}

.product-suite-preview {
    border: 1px solid rgba(91, 180, 238, .25);
    border-radius: 18px;
    padding: 9px;
    background: #eaf2f7;
    overflow: hidden
}

.readiness-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
}

@media(max-width:1260px) {
    .primary-nav {
        display: none;
        position: absolute;
        left: 20px;
        right: 20px;
        top: 72px;
        background: #061426;
        border: 1px solid #1c4e79;
        border-radius: 14px;
        padding: 10px;
        flex-direction: column
    }

    .primary-nav.open {
        display: flex
    }

    .menu-button {
        display: block
    }

    .nav-item {
        width: 100%
    }

    .nav-trigger {
        width: 100%;
        justify-content: space-between;
        text-align: left
    }

    .mega-shell {
        position: static !important;
        width: auto !important;
        transform: none !important;
        min-width: 0 !important
    }

    .nav-item:nth-child(3) .mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    .product-footer-grid {
        grid-template-columns: 1.4fr repeat(2, 1fr) !important
    }
}

@media(max-width:980px) {

    .portal-suite-grid,
    .related-portals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .portal-platform-map {
        grid-template-columns: 1fr
    }

    .portal-platform-map b {
        transform: rotate(90deg)
    }

    .home-hero-grid {
        grid-template-columns: 1fr
    }

    .hero-product-stack {
        min-height: 500px
    }

    .role-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .product-suite-feature {
        grid-template-columns: 1fr
    }

    .readiness-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }
}

@media(max-width:680px) {

    .portal-suite-grid,
    .related-portals-grid,
    .role-entry-grid {
        grid-template-columns: 1fr
    }

    .portal-navigator {
        top: 68px
    }

    .portal-nav-head strong {
        display: none
    }

    .hero-product-stack {
        min-height: 420px
    }

    .hps-s03 {
        width: 88%;
        left: 1%;
        top: 6%
    }

    .hps-s01 {
        width: 42%;
        right: 0;
        top: 56%;
        transform: translateY(-50%)
    }

    .hps-s01:hover {
        transform: translateY(calc(-50% - 4px))
    }

    .hps-s07 {
        width: 70%;
        left: 4%;
        bottom: 6%
    }

    .portal-hub-metrics {
        grid-template-columns: 1fr
    }

    .readiness-detail-grid {
        grid-template-columns: 1fr !important
    }

    .product-footer-grid {
        grid-template-columns: 1fr !important
    }
}

/* TRUSTED SERVICE 9.9+ */
.header-support-link {
    font-size: 12px;
    color: #9db8cc;
    padding: 7px 2px;
    white-space: nowrap
}

.status-button {
    border-color: rgba(77, 194, 234, .35) !important
}

.service-hero .hero-copy h1 {
    max-width: 760px
}

.service-page-hero {
    padding: 84px 0 54px;
    border-bottom: 1px solid rgba(91, 180, 238, .16);
    background: radial-gradient(circle at 75% 15%, rgba(44, 121, 196, .12), transparent 35%), linear-gradient(180deg, #061628, #04101e)
}

.service-page-hero h1 {
    font-size: clamp(35px, 4vw, 60px);
    max-width: 1000px;
    margin: .6rem 0 1rem
}

.service-page-hero>div>p {
    max-width: 920px;
    color: #a9bdcc;
    font-size: 16px
}

.service-trust-chain {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch
}

.trust-chain-step {
    position: relative;
    border: 1px solid rgba(86, 189, 235, .28);
    border-radius: 16px;
    padding: 18px 14px;
    background: linear-gradient(180deg, rgba(7, 32, 54, .98), rgba(4, 18, 32, .98));
    min-height: 145px;
    min-width: 0;
    overflow: hidden
}

.trust-chain-step:not(:last-child):after {
    content: '→';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: #65d9ff;
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
    pointer-events: none
}

.trust-chain-step>span {
    display: block;
    color: #64dafd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em
}

.trust-chain-step>strong {
    display: block;
    color: #f2f8fc;
    font-size: clamp(12px, 1.05vw, 14px);
    margin: .6rem 0;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual
}

.trust-chain-step>small {
    display: block;
    color: #8ea9bc;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: break-word
}

.service-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.service-card .status {
    font-size: 11px
}

.service-mini-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px
}

.service-mini-dl>div {
    border-top: 1px solid rgba(91, 180, 238, .12);
    padding-top: 8px
}

.service-mini-dl dt {
    color: #6bdcff;
    font-size: 11px;
    text-transform: uppercase
}

.service-mini-dl dd {
    margin: 2px 0 0;
    color: #a8bdcc;
    font-size: 12px
}

.actor-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.actor-trust-grid article {
    border: 1px solid rgba(91, 180, 238, .22);
    border-radius: 14px;
    padding: 14px;
    background: #06182a
}

.actor-trust-grid span {
    display: block;
    color: #6edcff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    margin-bottom: 6px
}

.actor-trust-grid strong {
    display: block;
    color: #dceaf5;
    font-size: 12px;
    line-height: 1.5
}

.access-note {
    margin-top: 14px;
    border-left: 3px solid #66d9fb;
    background: rgba(8, 39, 64, .72);
    padding: 13px 16px;
    border-radius: 0 12px 12px 0;
    color: #a8becf;
    font-size: 12px
}

.portal-trust-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: .55rem 0
}

.portal-trust-tags span {
    font-size: 11px;
    border: 1px solid rgba(102, 218, 253, .2);
    border-radius: 999px;
    padding: 5px 7px;
    color: #89bcd3;
    background: rgba(6, 30, 49, .8)
}

.lifecycle-rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px
}

.lifecycle-rail.compact {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}

.lifecycle-rail>div {
    border: 1px solid rgba(91, 180, 238, .23);
    border-radius: 13px;
    padding: 14px;
    background: #06182a;
    min-height: 86px
}

.lifecycle-rail span {
    display: block;
    color: #65d9fb;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 8px
}

.lifecycle-rail strong {
    font-size: 12px;
    color: #e6f2fa
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px
}

.data-table th,
.data-table td {
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(91, 180, 238, .16);
    padding: 12px 10px;
    font-size: 12px
}

.data-table th {
    color: #6edcff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #071a2e
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(91, 180, 238, .18);
    border-radius: 14px
}

.service-bridge {
    margin-top: 20px;
    border: 1px solid rgba(91, 180, 238, .22);
    border-radius: 12px;
    padding: 14px;
    background: #06182a
}

.service-footer-grid {
    grid-template-columns: minmax(260px, 1.5fr) repeat(5, minmax(120px, .8fr)) !important
}

.footer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #7899af;
    font-size: 11px;
    margin-top: 12px
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    border-top: 1px solid rgba(91, 180, 238, .12);
    padding: 18px 0;
    font-size: 11px;
    color: #7897ad
}

.mobile-support-link {
    font-size: 12px;
    color: #9db8cc
}

.section-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px
}

@media(max-width:1300px) {
    .service-trust-chain {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .trust-chain-step:after {
        display: none
    }

    .service-footer-grid {
        grid-template-columns: 1.4fr repeat(3, 1fr) !important
    }

    .lifecycle-rail,
    .lifecycle-rail.compact {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media(max-width:900px) {

    .service-trust-chain,
    .actor-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .service-footer-grid {
        grid-template-columns: 1fr 1fr !important
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }

    .lifecycle-rail,
    .lifecycle-rail.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .header-support-link {
        display: none
    }
}

@media(max-width:600px) {

    .service-trust-chain,
    .actor-trust-grid {
        grid-template-columns: 1fr
    }

    .service-footer-grid {
        grid-template-columns: 1fr !important
    }

    .lifecycle-rail,
    .lifecycle-rail.compact {
        grid-template-columns: 1fr
    }

    .service-page-hero {
        padding: 70px 0 40px
    }
}

/* UX CONVERGENCE 9.9+ */

/* UX CONVERGENCE 9.9+ */
:root {
    --header-main: 68px;
    --header-utility: 30px;
    --header-total: 98px;
    --content-max: 1460px;
    --reading-max: 780px
}

.shell {
    width: min(var(--content-max), calc(100% - 48px))
}

.site-header {
    top: 0;
    overflow: visible
}

.utility-bar {
    height: var(--header-utility);
    border-bottom: 1px solid rgba(74, 150, 202, .12);
    background: rgba(1, 8, 17, .98);
    font-size: 11px
}

.utility-shell {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.utility-context {
    color: #6689a2;
    letter-spacing: .04em;
    white-space: nowrap
}

.utility-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    min-width: 0
}

.utility-links>a {
    color: #8faec4;
    white-space: nowrap
}

.utility-links>a:hover {
    color: #dff6ff
}

.utility-language .language-trigger {
    height: 26px;
    padding: 0 7px;
    border: 0;
    background: transparent;
    font-size: 11px;
    color: #a9c6da
}

.utility-language .language-trigger:hover {
    background: #071a2e
}

.utility-language .language-menu {
    top: calc(100% + 4px)
}

.nav-shell {
    width: min(var(--content-max), calc(100% - 48px));
    min-height: var(--header-main);
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px
}

.brand {
    display: block;
    min-width: 0;
    overflow: visible
}

.brand img {
    width: 210px !important;
    max-width: 210px !important;
    max-height: 48px;
    object-fit: contain;
    object-position: left center;
    display: block
}

.primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px !important;
    margin: 0 !important;
    min-width: 0
}

.nav-item {
    min-width: 0
}

.nav-trigger {
    min-height: 42px !important;
    padding: .55rem .58rem !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 680 !important;
    white-space: nowrap
}

.nav-trigger>.ico {
    width: 12px;
    height: 12px
}

.nav-trigger.active {
    background: rgba(62, 151, 205, .05) !important;
    box-shadow: inset 0 -2px 0 #5bd7fa !important
}

.nav-item.open>.nav-trigger {
    background: #08213a !important;
    box-shadow: none !important
}

.nav-trigger:focus-visible,
.language-trigger:focus-visible,
.icon-button:focus-visible,
.button:focus-visible,
.local-toc a:focus-visible {
    outline: 2px solid #7de5ff;
    outline-offset: 2px
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0
}

.utility-button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px
}

.header-primary-cta {
    min-height: 40px;
    padding: .62rem .82rem;
    font-size: 12px;
    white-space: nowrap
}

.header-support-link,
.status-button,
.header-actions>.language-switcher {
    display: none !important
}

.mega-shell {
    width: min(1160px, calc(100vw - 64px));
    max-height: min(70vh, 680px);
    overflow: auto
}

.mega-grid,
.nav-item:nth-child(3) .mega-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important
}

.mega-group {
    min-width: 0
}

.mega-link {
    padding: 10px !important
}

.mega-link strong {
    font-size: 12px;
    line-height: 1.25
}

.mega-link span {
    font-size: 11px;
    line-height: 1.38;
    display: block;
    margin-top: 3px
}

.mega-group-title {
    font-size: 11px
}

.portal-navigator {
    top: var(--header-total) !important
}

.page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    gap: 38px;
    align-items: end
}

.page-hero-main {
    min-width: 0
}

.hero-context-card {
    align-self: end;
    border: 1px solid rgba(91, 180, 238, .22);
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(7, 30, 50, .96), rgba(4, 17, 30, .96));
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18)
}

.context-label {
    display: block;
    color: #67dbfc;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    margin-bottom: 10px
}

.context-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    margin: 0
}

.context-facts dt {
    color: #789bb3;
    font-size: 11px
}

.context-facts dd {
    margin: 0;
    color: #dcebf5;
    font-size: 11px;
    text-align: right
}

.section-context-layout {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(250px, 3.2fr);
    gap: 38px;
    align-items: start
}

#trust-chain .service-trust-chain {
    margin-top: 28px
}

.context-main {
    min-width: 0
}

.context-rail {
    position: sticky;
    top: calc(var(--header-total) + 22px);
    border-left: 1px solid rgba(91, 180, 238, .22);
    padding: 4px 0 8px 22px;
    min-width: 0
}

.local-toc {
    display: grid;
    gap: 3px
}

.local-toc a {
    display: block;
    color: #8eabbf;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    border-left: 2px solid transparent
}

.local-toc a:hover,
.local-toc a.active {
    color: #e5f7ff;
    background: rgba(31, 108, 158, .12);
    border-left-color: #62d8fb
}

.context-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(91, 180, 238, .14);
    font-size: 11px;
    color: #718fa5;
    line-height: 1.5
}

.section-head {
    max-width: 980px
}

.section-context-layout .section-head {
    max-width: none
}

.section-context-layout .context-main>p {
    max-width: var(--reading-max)
}

.integration-hero .hero-copy {
    max-width: 900px
}

.integration-flow {
    display: grid;
    grid-template-columns: repeat(11, auto);
    align-items: stretch;
    gap: 7px;
    overflow: auto;
    padding: 4px 0 10px
}

.integration-flow>div {
    min-width: 155px;
    border: 1px solid rgba(91, 180, 238, .26);
    border-radius: 14px;
    padding: 15px;
    background: #06182a
}

.integration-flow>b {
    display: grid;
    place-items: center;
    color: #64dcff
}

.integration-flow span {
    display: block;
    color: #67dcfd;
    font-size: 11px;
    font-weight: 900
}

.integration-flow strong {
    display: block;
    margin: 7px 0 4px;
    color: #eef8ff;
    font-size: 12px
}

.integration-flow small {
    color: #8faabd;
    font-size: 11px
}

.integration-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.integration-steps article,
.decision-card,
.technical-card {
    border: 1px solid rgba(91, 180, 238, .22);
    border-radius: 15px;
    padding: 18px;
    background: linear-gradient(180deg, #07182a, #04111f)
}

.integration-steps article>span {
    color: #67dbfc;
    font-size: 11px;
    font-weight: 900
}

.integration-steps h3,
.decision-card h3,
.technical-card h3 {
    margin: .35rem 0;
    color: #edf8ff
}

.integration-steps p,
.decision-card p,
.technical-card p {
    margin: .25rem 0;
    color: #96b2c5
}

.decision-card {
    border-left: 3px solid #5dcef5
}

.technical-card {
    border-top: 2px solid #6759c7
}

.download-drawer {
    margin-top: 18px;
    border: 1px solid rgba(91, 180, 238, .22);
    border-radius: 14px;
    background: #06182a
}

.download-drawer summary {
    cursor: pointer;
    padding: 14px 16px;
    color: #dfeef7;
    font-weight: 750
}

.download-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 0 16px 16px
}

.download-list a,
.raw-download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(91, 180, 238, .24);
    border-radius: 9px;
    padding: 8px 10px;
    color: #91cde5;
    font-size: 12px;
    background: rgba(3, 18, 31, .7)
}

.html-first-notice {
    margin: 12px 0 20px;
    border-left: 3px solid #63d8fb;
    background: rgba(8, 39, 64, .6);
    padding: 12px 15px;
    border-radius: 0 10px 10px 0;
    color: #9ebacd;
    font-size: 12px
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 5, 12, .94);
    display: grid;
    place-items: center;
    padding: 60px
}

.lightbox[hidden] {
    display: none
}

.lightbox img {
    max-height: 84vh;
    max-width: min(92vw, 1600px);
    object-fit: contain
}

.lightbox>[data-lightbox-close] {
    position: absolute;
    right: 24px;
    top: 22px
}

.lightbox-prev,
.lightbox-next {
    display: none !important
}

.card {
    transition: border-color .18s ease, transform .18s ease, background .18s ease
}

.decision-card,
.technical-card,
.evidence-card,
.metric-card {
    min-width: 0
}

@media(max-width:1380px) {
    .nav-shell {
        grid-template-columns: minmax(165px, 190px) minmax(0, 1fr) auto;
        gap: 8px
    }

    .brand img {
        width: 182px !important;
        max-width: 182px !important
    }

    .nav-trigger {
        padding: .52rem .44rem !important;
        font-size: 12px !important
    }

    .header-primary-cta {
        display: none
    }

    .mega-shell {
        width: min(1080px, calc(100vw - 40px))
    }
}

@media(max-width:1260px) {
    :root {
        --header-utility: 0px;
        --header-total: 66px
    }

    .utility-bar {
        display: none
    }

    .nav-shell {
        min-height: 66px;
        display: flex;
        gap: 10px;
        width: min(100%, calc(100% - 32px))
    }

    .brand img {
        width: 205px !important;
        max-width: 205px !important
    }

    .primary-nav {
        display: none !important;
        position: absolute;
        top: calc(100% - 1px) !important;
        left: 0 !important;
        right: 0 !important;
        max-height: calc(100vh - 78px);
        overflow: auto;
        padding: 10px;
        background: #061426;
        border: 1px solid #1c4e79;
        border-radius: 0 0 14px 14px;
        flex-direction: column;
        align-items: stretch
    }

    .primary-nav.open {
        display: flex !important
    }

    .nav-item {
        width: 100%
    }

    .nav-trigger {
        width: 100%;
        justify-content: space-between;
        font-size: 14px !important;
        padding: .72rem .8rem !important
    }

    .mega-shell {
        position: static !important;
        width: auto !important;
        max-height: none;
        transform: none !important;
        min-width: 0 !important;
        padding: 8px 0 10px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .mega-grid,
    .nav-item:nth-child(3) .mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    .mobile-nav-utility {
        display: grid
    }

    .mobile-menu {
        display: inline-flex !important
    }

    .header-primary-cta {
        display: none
    }

    .header-actions {
        margin-left: auto
    }

    .portal-navigator {
        top: 66px !important
    }
}

@media(max-width:980px) {

    .page-hero-grid,
    .section-context-layout {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .hero-context-card {
        max-width: none
    }

    .context-rail {
        position: static;
        border-left: 0;
        border-top: 1px solid rgba(91, 180, 238, .22);
        padding: 16px 0 0
    }

    .local-toc {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .integration-steps {
        grid-template-columns: 1fr
    }

    .section-head {
        max-width: 850px
    }
}

@media(max-width:680px) {
    .shell {
        width: min(100%, calc(100% - 28px))
    }

    .mega-grid,
    .nav-item:nth-child(3) .mega-grid {
        grid-template-columns: 1fr !important
    }

    .brand img {
        width: 190px !important;
        max-width: 190px !important
    }

    .utility-button {
        width: 40px;
        height: 40px
    }

    .page-hero-grid {
        gap: 16px
    }

    .hero-context-card {
        padding: 15px
    }

    .local-toc {
        grid-template-columns: 1fr
    }

    .integration-flow {
        grid-template-columns: 1fr;
        overflow: visible
    }

    .integration-flow>b {
        transform: rotate(90deg);
        height: 20px
    }

    .integration-flow>div {
        min-width: 0
    }

    .lightbox {
        padding: 54px 12px
    }

    .lightbox-prev {
        left: 8px
    }

    .lightbox-next {
        right: 8px
    }
}

/* Bilingual Product Hardening — 2026-09-02 */
.portal-official-name {
    margin-top: -.5rem;
    margin-bottom: 1.1rem;
    color: #7f9db7;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .01em
}

.portal-switcher-bar {
    position: sticky;
    top: var(--header-total, 106px);
    z-index: 82;
    border-top: 1px solid rgba(91, 180, 238, .14);
    border-bottom: 1px solid rgba(91, 180, 238, .2);
    background: rgba(2, 10, 20, .97);
    backdrop-filter: blur(14px)
}

.portal-switcher-shell {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px
}

.portal-current {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.portal-current span {
    font-size: 11px;
    letter-spacing: .13em;
    color: #65dafa;
    font-weight: 850
}

.portal-current strong {
    color: #eef8ff;
    font-size: 14px;
    white-space: normal
}

.portal-switcher-details {
    position: relative;
    flex: 0 0 auto
}

.portal-switcher-details summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid #27577c;
    border-radius: 10px;
    padding: .62rem .85rem;
    color: #dcecff;
    background: #07182a;
    font-size: 12px;
    font-weight: 750
}

.portal-switcher-details summary::-webkit-details-marker {
    display: none
}

.portal-switcher-details[open] summary {
    border-color: #5bd8fb;
    background: #08233c
}

.portal-switcher-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(880px, calc(100vw - 40px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
    border: 1px solid #27577c;
    border-radius: 14px;
    background: #061426;
    box-shadow: 0 30px 80px #000b
}

.portal-switcher-group {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.portal-switcher-group>span {
    color: #64d8fb;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .11em;
    margin: 4px 7px
}

.portal-switcher-group a {
    color: #a9c2d7;
    padding: .55rem .62rem;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.35
}

.portal-switcher-group a:hover,
.portal-switcher-group a.current {
    background: #0b2846;
    color: #fff
}

.portal-switcher-all {
    grid-column: 1/-1;
    border-top: 1px solid #153954;
    padding-top: 10px;
    margin-top: 4px;
    color: #70dcfb;
    font-size: 12px;
    font-weight: 750
}

.product-ui-gallery .product-ui-card.mobile-card {
    max-width: 410px !important;
    width: 100%;
    justify-self: center
}

.product-ui-card.mobile-card {
    background: linear-gradient(180deg, #07172a, #04111f)
}

.product-ui-card.mobile-card .product-ui-frame {
    padding: 8px;
    background: #061523;
    border-color: rgba(91, 180, 238, .3);
    border-radius: 24px
}

.product-ui-card.mobile-card .product-ui-media.mobile {
    aspect-ratio: auto !important;
    max-height: none !important;
    background: transparent !important;
    border-radius: 18px
}

.product-ui-card.mobile-card .product-ui-media.mobile img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    display: block
}

.product-ui-gallery {
    align-items: start
}

.product-ui-gallery:has(.mobile-card) {
    grid-template-columns: repeat(2, minmax(300px, 410px));
    justify-content: center
}

.corporate-footer {
    padding: 54px 0 0
}

.corporate-footer-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.65fr) repeat(4, minmax(150px, 1fr));
    gap: 28px;
    align-items: start
}

.corporate-block img {
    width: min(320px, 100%);
    height: auto;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 15px
}

.corporate-name {
    display: block;
    color: #eef8ff;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px
}

.corporate-block p {
    color: #91acc1;
    font-size: 12px;
    line-height: 1.55;
    max-width: 430px
}

.corporate-contact {
    margin-top: 14px;
    display: grid;
    gap: 5px;
    color: #8faac0;
    font-size: 12px;
    line-height: 1.45
}

.corporate-contact b {
    color: #bad0e1;
    font-weight: 720
}

.corporate-contact a {
    display: inline;
    padding: 0;
    color: #8fdcf6
}

.footer-nav-col h4 {
    color: #e7f3fc;
    font-size: 12px;
    letter-spacing: .08em;
    margin: 0 0 12px
}

.footer-nav-col a {
    display: block;
    color: #91acc2;
    padding: .3rem 0;
    font-size: 12px;
    line-height: 1.35
}

.corporate-footer-bottom {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap
}

.footer-legal a {
    display: inline;
    color: #7f9db4
}

@media(max-width:1280px) {
    .corporate-footer-grid {
        grid-template-columns: minmax(300px, 1.5fr) repeat(2, 1fr)
    }

    .corporate-block {
        grid-row: span 2
    }

    .portal-switcher-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:900px) {
    .portal-switcher-shell {
        min-height: 64px
    }

    .portal-current strong {
        font-size: 12px
    }

    .portal-switcher-panel {
        grid-template-columns: 1fr;
        width: min(560px, calc(100vw - 32px));
        max-height: 70vh;
        overflow: auto
    }

    .corporate-footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .corporate-block {
        grid-column: 1/-1;
        grid-row: auto
    }

    .product-ui-gallery:has(.mobile-card) {
        grid-template-columns: repeat(2, minmax(250px, 360px))
    }
}

@media(max-width:680px) {
    .portal-switcher-shell {
        gap: 10px
    }

    .portal-current span {
        font-size: 11px
    }

    .portal-current strong {
        font-size: 12px
    }

    .portal-switcher-details summary {
        padding: .55rem .65rem;
        font-size: 11px
    }

    .product-ui-gallery:has(.mobile-card) {
        grid-template-columns: 1fr
    }

    .product-ui-gallery .product-ui-card.mobile-card {
        max-width: 360px !important
    }

    .corporate-footer-grid {
        grid-template-columns: 1fr
    }

    .corporate-footer-bottom {
        align-items: flex-start;
        flex-direction: column
    }
}

/* Production Polish — 2026-09-02 */
:root {
    --public-shell: 1360px
}

body .shell {
    width: min(var(--public-shell), calc(100% - 48px))
}

.section-head:has(>p) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: 34px;
    align-items: end
}

.section-head:has(>p)>p {
    margin: 0;
    max-width: 540px;
    justify-self: end
}

.mega-shell.mega-cols-1 {
    width: min(440px, calc(100vw - 48px))
}

.mega-shell.mega-cols-2 {
    width: min(720px, calc(100vw - 48px))
}

.mega-shell.mega-cols-3 {
    width: min(940px, calc(100vw - 48px))
}

.mega-shell.mega-cols-4 {
    width: min(1160px, calc(100vw - 48px))
}

.mega-grid.mega-cols-1 {
    grid-template-columns: 1fr !important
}

.mega-grid.mega-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
}

.mega-grid.mega-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
}

.mega-grid.mega-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
}

.mega-group {
    align-self: start
}

.mega-link span {
    max-width: 28ch
}

/* Product screenshots use their natural ratio; no artificial light canvas. */
.product-ui-gallery[data-surface-type="mobile"] {
    grid-template-columns: minmax(340px, 430px) repeat(3, minmax(210px, 260px));
    justify-content: center;
    align-items: start;
    gap: 20px
}

.product-ui-gallery[data-surface-type="mobile"] .product-ui-card {
    max-width: none !important;
    width: 100%;
    background: linear-gradient(180deg, #061728, #030e19)
}

.product-ui-gallery[data-surface-type="mobile"] .product-ui-hero-card {
    max-width: 430px !important
}

.product-ui-gallery[data-surface-type="mobile"] .product-ui-secondary-card {
    max-width: 260px !important
}

.product-ui-gallery[data-surface-type="mobile"] .product-ui-frame {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 6px;
    background: #020b14;
    border: 1px solid rgba(91, 180, 238, .28);
    border-radius: 24px;
    overflow: hidden
}

.product-ui-gallery[data-surface-type="mobile"] .product-ui-media.mobile {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    background: #020b14 !important;
    border: 0 !important;
    border-radius: 18px;
    overflow: hidden
}

.product-ui-gallery[data-surface-type="mobile"] .product-ui-media.mobile picture {
    display: block;
    width: auto;
    max-width: 100%
}

.product-ui-gallery[data-surface-type="mobile"] .product-ui-media.mobile img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: #020b14 !important;
    margin: 0 auto
}

.product-ui-gallery[data-surface-type="web"],
.product-ui-gallery[data-surface-type="viewer"],
.product-ui-gallery[data-surface-type="console"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start
}

.product-ui-gallery[data-surface-type="web"] .product-ui-frame,
.product-ui-gallery[data-surface-type="viewer"] .product-ui-frame,
.product-ui-gallery[data-surface-type="console"] .product-ui-frame {
    padding: 7px;
    background: #030d17;
    border-color: rgba(91, 180, 238, .26)
}

.product-ui-gallery .product-ui-media {
    background: #020b14 !important
}

.product-ui-gallery .product-ui-media img {
    background: #020b14 !important
}

.product-ui-meta {
    padding: 14px 15px 16px
}

.product-ui-meta h3 {
    font-size: 16px;
    line-height: 1.35
}

.product-ui-meta p {
    display: none
}

.product-ui-provenance {
    display: none !important
}

.product-ui-trace {
    background: linear-gradient(180deg, rgba(6, 28, 47, .96), rgba(3, 16, 28, .98));
    border-left: 3px solid #55d4f7
}

.product-ui-trace dl {
    grid-template-columns: 150px 1fr
}

/* Customer-facing cards should be dense enough to feel intentional. */
.grid.g4>.card {
    min-height: 0;
    padding: 18px
}

.grid.g4>.card p {
    font-size: 14px;
    line-height: 1.55
}

.grid.g4>.card h3 {
    margin: .55rem 0 .25rem
}

.portal-official-name {
    color: #7897ae;
    font-size: 12px;
    margin-top: -.3rem;
    margin-bottom: 1rem;
    font-weight: 600
}

/* Footer: corporate column is intentionally wider; navigation adapts before clipping. */
.corporate-footer-grid {
    grid-template-columns: minmax(340px, 1.8fr) repeat(4, minmax(150px, 1fr));
    gap: 30px
}

.corporate-block img {
    max-width: 280px
}

.corporate-contact {
    font-size: 12px
}

.footer-nav-col a {
    font-size: 12px
}

@media(max-width:1320px) {
    body .shell {
        width: min(100%, calc(100% - 40px))
    }

    .product-ui-gallery[data-surface-type="mobile"] {
        grid-template-columns: minmax(330px, 400px) repeat(3, minmax(180px, 220px));
        gap: 16px
    }

    .product-ui-gallery[data-surface-type="mobile"] .product-ui-secondary-card {
        max-width: 220px !important
    }

    .corporate-footer-grid {
        grid-template-columns: minmax(320px, 1.6fr) repeat(2, 1fr)
    }

    .corporate-block {
        grid-row: span 2
    }
}

@media(max-width:1080px) {
    .section-head:has(>p) {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .section-head:has(>p)>p {
        justify-self: start;
        max-width: 780px
    }

    .product-ui-gallery[data-surface-type="mobile"] {
        grid-template-columns: repeat(2, minmax(280px, 360px))
    }

    .product-ui-gallery[data-surface-type="mobile"] .product-ui-card,
    .product-ui-gallery[data-surface-type="mobile"] .product-ui-secondary-card,
    .product-ui-gallery[data-surface-type="mobile"] .product-ui-hero-card {
        max-width: 360px !important
    }

    .mega-shell.mega-cols-3,
    .mega-shell.mega-cols-4 {
        width: min(100%, calc(100vw - 32px))
    }
}

@media(max-width:760px) {
    body .shell {
        width: min(100%, calc(100% - 28px))
    }

    .product-ui-gallery[data-surface-type="mobile"],
    .product-ui-gallery[data-surface-type="web"],
    .product-ui-gallery[data-surface-type="viewer"],
    .product-ui-gallery[data-surface-type="console"] {
        grid-template-columns: 1fr
    }

    .product-ui-gallery[data-surface-type="mobile"] .product-ui-card,
    .product-ui-gallery[data-surface-type="mobile"] .product-ui-secondary-card,
    .product-ui-gallery[data-surface-type="mobile"] .product-ui-hero-card {
        max-width: 390px !important;
        justify-self: center
    }

    .product-ui-trace dl {
        grid-template-columns: 1fr
    }

    .product-ui-trace dt {
        margin-top: 5px
    }

    .corporate-footer-grid {
        grid-template-columns: 1fr
    }

    .corporate-block {
        grid-row: auto
    }

    .corporate-footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }
}

/* Contract Integrity + Data Trust + Metro/Bento Enterprise UX — 2026-09-02 */
.metro-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    grid-auto-flow: dense;
    align-items: stretch
}

.metro-tile {
    grid-column: span 4;
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(89, 196, 255, .25);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(8, 31, 55, .96), rgba(4, 18, 34, .92));
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12)
}

.metro-tile h3 {
    margin: 10px 0 10px;
    font-size: clamp(16px, 1.35vw, 22px);
    line-height: 1.25
}

.metro-tile p {
    margin: 0;
    color: var(--muted, #9db4ca);
    line-height: 1.62
}

.metro-tile dl {
    margin: 18px 0 0;
    display: grid;
    gap: 8px
}

.metro-tile dt {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #71dafa
}

.metro-tile dd {
    margin: 2px 0 0;
    color: #d9e8f5
}

.metro-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(73, 201, 255, .35);
    background: rgba(28, 107, 156, .16);
    color: #77dcff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em
}

.span-3 {
    grid-column: span 3
}

.span-4 {
    grid-column: span 4
}

.span-6 {
    grid-column: span 6
}

.span-8 {
    grid-column: span 8
}

.span-12 {
    grid-column: 1/-1
}

.metro-assurance {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.metro-assurance>article {
    grid-column: span 4;
    min-height: auto !important
}

.metro-assurance .service-card {
    padding: 22px
}

.metro-assurance .service-card h3 {
    font-size: 22px;
    margin-top: 12px
}

.metro-assurance .service-card p {
    min-height: 0
}

.metro-secondary>article {
    grid-column: span 4
}

.lifecycle-rail.metro-lifecycle {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch
}

.lifecycle-rail.metro-lifecycle>div {
    grid-column: span 3;
    min-width: 0;
    min-height: 142px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(7, 31, 55, .95), rgba(4, 19, 35, .88));
    border: 1px solid rgba(88, 196, 255, .24)
}

.lifecycle-rail.metro-lifecycle>div>span:first-child {
    position: absolute;
    top: 16px;
    left: 18px;
    color: #65dafd;
    font-weight: 800
}

.lifecycle-phase-label {
    position: absolute !important;
    top: 15px !important;
    right: 16px !important;
    left: auto !important;
    font-size: 11px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8fabbe !important
}

.lifecycle-rail.metro-lifecycle strong {
    font-size: 16px;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0
}

.lifecycle-rail.metro-lifecycle .metro-phase-1 {
    border-color: rgba(86, 194, 255, .35)
}

.lifecycle-rail.metro-lifecycle .metro-phase-2 {
    border-color: rgba(99, 215, 185, .3)
}

.lifecycle-rail.metro-lifecycle .metro-phase-3 {
    border-color: rgba(255, 176, 71, .3)
}

.lifecycle-rail.metro-lifecycle .metro-phase-4 {
    border-color: rgba(172, 128, 255, .32)
}

.metro-security>article:nth-child(1),
.metro-security>article:nth-child(2) {
    grid-column: span 6
}

.metro-security>article:nth-child(n+3) {
    grid-column: span 3
}

.metro-data-trust>article:nth-child(4),
.metro-data-trust>article:nth-child(5) {
    grid-column: span 6
}

.metro-compact>article {
    grid-column: span 3
}

.metro-lifecycle-exit>article {
    grid-column: span 3
}

.portal-suite-grid.metro-portal-hub {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px
}

.portal-suite-grid.metro-portal-hub>.portal-suite-card {
    grid-column: span 4
}

.portal-suite-grid.metro-portal-hub>.portal-suite-card:first-child {
    grid-column: span 6
}

.portal-suite-grid.metro-portal-hub>.portal-suite-card:nth-child(2) {
    grid-column: span 6
}

code[data-api-contract],
code[data-machine-token] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    white-space: nowrap;
    color: #dff8ff;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(78, 186, 235, .22);
    border-radius: 7px;
    padding: .18em .42em;
    font-size: 14px
}

.data-table td code[data-api-contract] {
    display: inline-flex;
    max-width: 100%;
    overflow: auto
}

.section-cta {
    margin-top: 22px
}

.section-cta a {
    font-weight: 750;
    color: #72d9ff
}

@media(max-width:1180px) {

    .span-3,
    .metro-compact>article,
    .metro-lifecycle-exit>article,
    .metro-security>article:nth-child(n) {
        grid-column: span 6
    }

    .span-4,
    .span-6,
    .span-8,
    .metro-data-trust>article:nth-child(n) {
        grid-column: span 6
    }

    .lifecycle-rail.metro-lifecycle>div {
        grid-column: span 4
    }

    .metro-assurance>article,
    .metro-secondary>article {
        grid-column: span 6
    }
}

@media(max-width:760px) {

    .metro-grid,
    .lifecycle-rail.metro-lifecycle,
    .portal-suite-grid.metro-portal-hub {
        grid-template-columns: 1fr
    }

    .metro-tile,
    .span-3,
    .span-4,
    .span-6,
    .span-8,
    .span-12,
    .metro-assurance>article,
    .metro-secondary>article,
    .metro-security>article:nth-child(n),
    .metro-data-trust>article:nth-child(n),
    .metro-compact>article,
    .metro-lifecycle-exit>article,
    .lifecycle-rail.metro-lifecycle>div,
    .portal-suite-grid.metro-portal-hub>.portal-suite-card,
    .portal-suite-grid.metro-portal-hub>.portal-suite-card:first-child,
    .portal-suite-grid.metro-portal-hub>.portal-suite-card:nth-child(2) {
        grid-column: 1/-1
    }

    .lifecycle-rail.metro-lifecycle>div {
        min-height: 118px
    }
}


/* Semantic Policy + Trust Evidence hardening — 2026-09-03 */
.trust-center-mega .trust-center-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px
}

.trust-center-mega .mega-group {
    min-width: 0
}

.trust-center-mega .mega-link {
    display: block;
    padding: 10px 0
}

.trust-center-mega .mega-link strong {
    display: block;
    font-size: 16px;
    line-height: 1.3
}

.trust-center-mega .mega-link span {
    display: block;
    margin-top: 4px;
    line-height: 1.45
}

.trust-center-mega .mega-group-title {
    margin-bottom: 10px
}

.policy-signature-section {
    overflow: hidden
}

.policy-head {
    align-items: end
}

.policy-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1.14fr) 36px minmax(0, 1fr) 36px minmax(0, 1.35fr);
    gap: 8px;
    align-items: stretch;
    margin-top: 30px
}

.policy-step {
    position: relative;
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(92, 199, 255, .28);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(5, 26, 48, .98), rgba(4, 17, 32, .95));
    display: flex;
    flex-direction: column;
    gap: 9px
}

.policy-step-no {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    color: #65d9fb
}

.policy-step h3 {
    margin: 0;
    font-size: clamp(16px, 1.25vw, 22px);
    line-height: 1.28
}

.policy-tech {
    font-size: 12px;
    color: #88a8c0;
    line-height: 1.35
}

.policy-step p {
    margin: 0;
    color: #adc1d2;
    line-height: 1.5
}

.policy-decision {
    border-color: rgba(255, 173, 66, .58);
    box-shadow: 0 0 0 1px rgba(255, 173, 66, .10), 0 20px 48px rgba(0, 0, 0, .18);
    transform: translateY(-7px)
}

.policy-enforce {
    border-color: rgba(114, 155, 255, .52)
}

.policy-result {
    border-color: rgba(75, 219, 166, .48);
    background: linear-gradient(145deg, rgba(5, 38, 43, .96), rgba(4, 21, 32, .96))
}

.policy-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #61d8ff;
    font-size: 35px
}

.policy-fields {
    display: grid;
    gap: 6px;
    margin-top: 8px
}

.policy-field {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .035);
    font-size: 12px
}

.policy-field-status {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase
}

.policy-field-status.allow {
    color: #6ce1b0
}

.policy-field-status.conditional {
    color: #ffd47a
}

.policy-field-status.mask {
    color: #8cc8ff
}

.policy-field-status.deny {
    color: #ff8a8a
}

.policy-invariant {
    margin-top: 22px;
    padding: 16px 20px;
    border-left: 3px solid #5fd8ff;
    background: rgba(18, 88, 132, .12);
    font-weight: 800;
    font-size: clamp(16px, 1.4vw, 22px)
}

.signature-bento>.portal-suite-card:nth-child(1) {
    grid-column: span 6
}

.signature-bento>.portal-suite-card:nth-child(2) {
    grid-column: span 6
}

.signature-bento>.portal-suite-card:nth-child(3) {
    grid-column: span 5
}

.signature-bento>.portal-suite-card:nth-child(4) {
    grid-column: span 4
}

.signature-bento>.portal-suite-card:nth-child(5) {
    grid-column: span 3
}

.signature-bento>.portal-suite-card:nth-child(n+6) {
    grid-column: span 4
}

.homepage-bento>article:nth-child(1) {
    grid-column: span 6
}

.homepage-bento>article:nth-child(2) {
    grid-column: span 3
}

.homepage-bento>article:nth-child(3) {
    grid-column: span 3
}

.ecosystem-bento>article:nth-child(1) {
    grid-column: span 6
}

.ecosystem-bento>article:nth-child(2),
.ecosystem-bento>article:nth-child(3) {
    grid-column: span 3
}

.ecosystem-bento>article:nth-child(n+4) {
    grid-column: span 4
}

@media(max-width:1360px) {
    .trust-center-mega .trust-center-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .policy-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px
    }

    .policy-arrow {
        display: none
    }

    .policy-result {
        grid-column: 1/-1
    }

    .policy-decision {
        transform: none
    }
}

@media(max-width:760px) {
    .trust-center-mega .trust-center-grid {
        grid-template-columns: 1fr
    }

    .policy-flow {
        grid-template-columns: 1fr
    }

    .policy-result {
        grid-column: auto
    }

    .homepage-bento>article:nth-child(n),
    .ecosystem-bento>article:nth-child(n),
    .signature-bento>.portal-suite-card:nth-child(n) {
        grid-column: 1/-1
    }

    .policy-step {
        padding: 18px
    }
}

/* Homepage layout fixes — section-head, grids, equal media frames */
.section-head,
.section-head:has(>p) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    max-width: none
}

.section-head>p,
.section-head:has(>p)>p {
    margin: 0;
    max-width: none;
    justify-self: stretch
}

.homepage-bento.metro-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
}

.homepage-bento.metro-grid>article,
.homepage-bento.metro-grid>article:nth-child(n) {
    grid-column: auto !important
}

.portal-suite-grid.home-portal-grid.metro-portal-hub,
.portal-suite-grid.home-portal-grid.signature-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;
    align-items: stretch
}

.portal-suite-grid.home-portal-grid>.portal-suite-card,
.portal-suite-grid.home-portal-grid>.portal-suite-card:nth-child(n),
.portal-suite-grid.home-portal-grid.metro-portal-hub>.portal-suite-card,
.portal-suite-grid.home-portal-grid.metro-portal-hub>.portal-suite-card:first-child,
.portal-suite-grid.home-portal-grid.metro-portal-hub>.portal-suite-card:nth-child(2),
.portal-suite-grid.home-portal-grid.signature-bento>.portal-suite-card:nth-child(n) {
    grid-column: auto !important
}

.home-portal-grid .portal-suite-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0
}

.home-portal-grid .portal-suite-media {
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    background: #061523
}

.home-portal-grid .portal-suite-media picture,
.home-portal-grid .portal-suite-media img {
    width: 100%;
    height: 100%
}

.home-portal-grid .portal-suite-media img {
    object-fit: cover;
    object-position: top center;
    background: #061523
}

.home-portal-grid .portal-suite-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

.home-portal-grid .portal-suite-body .text-link {
    margin-top: auto
}

.product-ui-mosaic {
    align-items: stretch
}

.product-ui-mosaic .product-ui-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden
}

.product-ui-mosaic .product-ui-frame,
.product-ui-mosaic .product-ui-card.mobile-card .product-ui-frame {
    flex: 0 0 auto;
    padding: 0 !important;
    border-radius: 0;
    background: #061523 !important;
    overflow: hidden
}

.product-ui-mosaic .product-ui-media,
.product-ui-mosaic .product-ui-media.mobile,
.product-ui-mosaic .product-ui-card.mobile-card .product-ui-media.mobile {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #061523 !important;
    border-radius: 0 !important
}

.product-ui-mosaic .product-ui-media picture,
.product-ui-mosaic .product-ui-media.mobile picture,
.product-ui-mosaic .product-ui-card.mobile-card .product-ui-media.mobile picture,
.product-ui-mosaic .product-ui-media img,
.product-ui-mosaic .product-ui-media.mobile img,
.product-ui-mosaic .product-ui-card.mobile-card .product-ui-media.mobile img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: top center !important;
    background: #061523 !important
}

.product-ui-mosaic .product-ui-meta {
    flex: 1 1 auto
}

.proof-copy .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media (max-width: 980px) {
    .homepage-bento.metro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    .portal-suite-grid.home-portal-grid.metro-portal-hub,
    .portal-suite-grid.home-portal-grid.signature-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }
}

@media (max-width: 760px) {
    .homepage-bento.metro-grid,
    .portal-suite-grid.home-portal-grid.metro-portal-hub,
    .portal-suite-grid.home-portal-grid.signature-bento {
        grid-template-columns: 1fr !important
    }

    .homepage-bento.metro-grid>article:nth-child(n),
    .portal-suite-grid.home-portal-grid>.portal-suite-card:nth-child(n) {
        grid-column: auto !important
    }
}