* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #03050a;
    color: #f5f7ff;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow-x: hidden
}

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

.page {
    min-height: 100vh;
    position: relative;
    overflow: hidden
}

.stars, .stars:before, .stars:after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image: radial-gradient(circle at 12% 18%,rgba(255,255,255,.75) 0 1px,transparent 1.5px), radial-gradient(circle at 76% 22%,rgba(120,190,255,.55) 0 1px,transparent 1.5px), radial-gradient(circle at 41% 72%,rgba(255,255,255,.5) 0 1px,transparent 1.5px), radial-gradient(circle at 88% 81%,rgba(255,255,255,.45) 0 1px,transparent 1.5px);
    background-size: 280px 240px,360px 300px,420px 380px,500px 420px;
    opacity: .38
}

    .stars:before {
        transform: translate(-40px,-20px);
        opacity: .3
    }

    .stars:after {
        transform: translate(70px,40px);
        opacity: .2
    }

.nav {
    position: fixed;
    z-index: 50;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1000px,calc(100% - 36px));
    height: 48px;
    padding: 0 16px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background: rgba(5,8,15,.72);
    backdrop-filter: blur(18px)
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none
}

    .logo img {
        display: block;
        width: 104px;
        height: auto;
        max-height: 38px;
        object-fit: contain
    }

.navlinks {
    display: flex;
    gap: 24px;
    font-size: 10px;
    letter-spacing: .13em;
    color: #778196;
    text-transform: uppercase
}

    .navlinks a:hover {
        color: #fff
    }

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 150px 24px 80px;
    position: relative
}

    .hero .content {
        max-width: 1100px;
        position: relative;
        z-index: 2
    }

.kicker {
    font-size: 10px;
    letter-spacing: .35em;
    color: #55dcff;
    text-transform: uppercase;
    margin-bottom: 22px
}

h1 {
    font-size: clamp(58px,9vw,126px);
    line-height: .86;
    letter-spacing: -.075em;
    margin: 0;
    font-weight: 900
}

.gradient {
    background: linear-gradient(100deg,#53dcff,#789dff 42%,#b57cff 72%,#e879ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero p {
    max-width: 720px;
    margin: 30px auto 0;
    color: #8792a8;
    font-size: 16px;
    line-height: 1.75
}

.scroll {
    margin-top: 50px;
    color: #657087;
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase
}

    .scroll i {
        display: block;
        width: 1px;
        height: 52px;
        margin: 12px auto 0;
        background: linear-gradient(#53dcff,transparent)
    }

.universe {
    min-height: 110vh;
    position: relative;
    padding: 60px 6vw 60px;
    border-top: 1px solid rgba(255,255,255,.05)
}

.sectionhead {
    max-width: 850px;
    position: relative;
    z-index: 10;
    padding-top: 8px
}

.sectionno {
    font-size: 10px;
    letter-spacing: .3em;
    color: #51ddff;
    text-transform: uppercase
}

.sectionhead h2 {
    font-size: clamp(48px,6.5vw,92px);
    line-height: .9;
    letter-spacing: -.065em;
    margin: 18px 0
}

.sectionhead p {
    max-width: 700px;
    color: #8490a5;
    line-height: 1.7
}

.system {
    position: relative;
    width: min(1050px,90vw);
    height: min(720px,68vw);
    min-height: 620px;
    margin: 34px auto 0
}

.core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid rgba(75,218,255,.55);
    background: radial-gradient(circle,#152b49 0,#07101e 52%,#03050a 75%);
    box-shadow: 0 0 90px rgba(45,180,255,.14),inset 0 0 40px rgba(80,150,255,.12);
    z-index: 3
}

    .core strong {
        font-size: 19px;
        letter-spacing: .12em
    }

    .core small {
        display: block;
        color: #66748d;
        font-size: 7px;
        letter-spacing: .3em;
        margin-top: 8px
    }

.ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(74,140,190,.2);
    border-radius: 50%;
    pointer-events: none
}

.r1 {
    width: 330px;
    height: 330px
}

.r2 {
    width: 540px;
    height: 540px
}

.r3 {
    width: 740px;
    height: 740px
}

.orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%)
}


.node {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: 190px;
    min-height: 92px;
    padding: 17px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(7,11,20,.9);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 45px rgba(0,0,0,.3);
    transition: .25s ease;
    cursor: pointer
}

    .node:hover {
        border-color: var(--accent);
        box-shadow: 0 0 35px color-mix(in srgb,var(--accent) 25%,transparent)
    }

    .node b {
        display: block;
        font-size: 14px;
        margin-bottom: 8px
    }

    .node p {
        margin: 0;
        color: #7d899d;
        font-size: 10px;
        line-height: 1.5
    }

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    margin-right: 8px
}

/* Cards are positioned by JS around one orbit. They never rotate. */
.orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%);
    pointer-events: none
}

.node {
    will-change: transform;
    pointer-events: auto;
    rotate: none;
    animation: none !important
}

    .node:hover {
        transform-origin: center center
    }

.n1 {
    left: 50%;
    top: 2%;
    transform: translateX(-50%);
    --accent: #52ddff
}

.n2 {
    left: 4%;
    top: 25%;
    --accent: #78a8ff
}

.n3 {
    right: 4%;
    top: 27%;
    --accent: #a77cff
}

.n4 {
    right: 0;
    top: 61%;
    --accent: #fff
}

.n5 {
    left: 2%;
    top: 62%;
    --accent: #ffc64d
}

.n6 {
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    --accent: #59e5b2
}

.n7 {
    left: 22%;
    bottom: 5%;
    --accent: #ff69c8
}

.n8 {
    right: 20%;
    bottom: 5%;
    --accent: #ff806e
}

.filters {
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 15px;
    position: relative;
    z-index: 5
}

.filter {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: #070b13;
    color: #69758a;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer
}

    .filter.active, .filter:hover {
        color: #fff;
        border-color: #3bd7ff
    }

/* SECTION 03 — GENERIC BUSINESS VALUE */
.why {
    min-height: 100vh;
    position: relative;
    padding: 140px 8vw 60px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex;
    align-items: center
}

.whygrid {
    width: min(1180px,100%);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.why h2 {
    font-size: clamp(54px,7vw,96px);
    line-height: .88;
    letter-spacing: -.065em;
    margin: 18px 0 28px
}

.why .lead {
    max-width: 610px;
    color: #8792a8;
    font-size: 16px;
    line-height: 1.8
}

.benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.benefit {
    padding: 25px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    background: linear-gradient(145deg,rgba(11,17,29,.86),rgba(4,7,13,.72));
    transition: .25s ease
}

    .benefit:hover {
        transform: translateY(-5px);
        border-color: rgba(83,220,255,.35)
    }

    .benefit span {
        display: block;
        color: #55dcff;
        font-size: 9px;
        letter-spacing: .2em;
        text-transform: uppercase;
        margin-bottom: 15px
    }

    .benefit h3 {
        font-size: 18px;
        margin: 0 0 8px
    }

    .benefit p {
        font-size: 11px;
        line-height: 1.65;
        color: #768297;
        margin: 0
    }

.whycta {
    display: inline-flex;
    margin-top: 32px;
    padding: 13px 19px;
    border: 1px solid rgba(83,220,255,.3);
    border-radius: 999px;
    color: #dce9ff;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(83,220,255,.05)
}

    .whycta:hover {
        background: rgba(83,220,255,.1);
        border-color: #55dcff
    }

@media(max-width:800px) {
    .navlinks {
        gap: 10px
    }

    .system {
        min-height: 600px;
        height: 700px;
        width: 100%
    }

    .r3 {
        width: 620px;
        height: 620px
    }

    .r2 {
        width: 440px;
        height: 440px
    }

    .r1 {
        width: 270px;
        height: 270px
    }

    .node {
        width: 155px;
        padding: 13px
    }

        .node p {
            font-size: 9px
        }

    .n2 {
        left: 0
    }

    .n3 {
        right: 0
    }

    .n4 {
        right: 0
    }

    .n5 {
        left: 0
    }

    .n7 {
        left: 5%
    }

    .n8 {
        right: 5%
    }
}

@media(max-width:560px) {
    .nav {
        width: calc(100% - 20px)
    }

    .navlinks a:nth-child(2) {
        display: none
    }

    .hero {
        padding-top: 130px
    }

        .hero p {
            font-size: 14px
        }

    .system {
        min-height: 680px;
        height: 760px
    }

    .r3 {
        width: 560px;
        height: 560px
    }

    .r2 {
        width: 390px;
        height: 390px
    }

    .r1 {
        width: 235px;
        height: 235px
    }

    .node {
        width: 135px;
        min-height: 78px
    }

        .node b {
            font-size: 11px
        }

        .node p {
            font-size: 8px
        }

    .n1 {
        top: 0
    }

    .n2 {
        top: 22%;
        left: -2%
    }

    .n3 {
        top: 22%;
        right: -2%
    }

    .n4 {
        top: 55%;
        right: -2%
    }

    .n5 {
        top: 55%;
        left: -2%
    }

    .n6 {
        bottom: 2%
    }

    .n7 {
        bottom: 11%;
        left: 2%
    }

    .n8 {
        bottom: 11%;
        right: 2%
    }
}

.logo {
    display: flex !important;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    letter-spacing: .12em;
    font-weight: 900;
    font-size: 15px
}

.logo-aria {
    color: #f5f7ff
}

.logo-ai {
    color: #52ddff;
    text-shadow: 0 0 18px rgba(82,221,255,.45);
    letter-spacing: .04em;
}

/* FAQ */
.faq {
    min-height: 100vh;
    padding: 130px 8vw 60px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex;
    align-items: center;
}

.faq-inner {
    width: min(1080px,100%);
    margin: auto
}

.faq-head {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: end;
    margin: 20px 0 55px
}

.faq h2 {
    font-size: clamp(52px,6.5vw,88px);
    line-height: .9;
    letter-spacing: -.06em;
    margin: 0
}

.faq-head > p {
    max-width: 420px;
    color: #8792a8;
    line-height: 1.75;
    font-size: 14px;
    margin: 0
}

.faq-list {
    border-top: 1px solid rgba(255,255,255,.1)
}

.faq details {
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 0
}

.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 25px 5px;
    font-size: 18px;
    font-weight: 650;
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .faq summary::-webkit-details-marker {
        display: none
    }

    .faq summary:after {
        content: "+";
        font-size: 24px;
        font-weight: 300;
        color: #52ddff;
        transition: .25s
    }

.faq details[open] summary:after {
    content: "−"
}

.faq details p {
    max-width: 780px;
    color: #7e899d;
    font-size: 13px;
    line-height: 1.8;
    padding: 0 45px 25px 5px;
    margin: 0
}

@media(max-width:800px) {
    .faq-head {
        display: block
    }

        .faq-head > p {
            margin-top: 25px
        }

    .faq summary {
        font-size: 15px
    }
}

/* Anti-copy */
html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    html::-webkit-scrollbar {
        display: none;
    }

body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* ARIA LINE WAVES BACKGROUND — vanilla WebGL adaptation of the supplied LineWaves component */
body {
    background: #02050b
}

.page {
    z-index: 1;
    background: transparent
}

#aria-linewaves {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: .82;
}

    #aria-linewaves canvas {
        display: block;
        width: 100%;
        height: 100%;
    }

.linewaves-wash {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 46%,rgba(39,185,255,.08),transparent 34%), radial-gradient(circle at 84% 28%,rgba(145,92,255,.07),transparent 30%), linear-gradient(180deg,rgba(2,5,11,.32),rgba(2,5,11,.72));
}

.stars {
    z-index: 2;
    opacity: .10
}


/* Contrast pass — keep the LineWaves background, lift foreground text */
body {
    color: #f7faff
}

.navlinks {
    color: #aeb9cc !important
}

    .navlinks a:hover {
        color: #ffffff !important
    }

.kicker, .sectionno {
    color: #69e8ff !important;
    text-shadow: 0 0 14px rgba(82,221,255,.18)
}

.hero p, .sectionhead p, .why .lead, .faq-head > p {
    color: #b8c4d8 !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.55)
}

.scroll {
    color: #a7b3c8 !important
}

.gradient {
    background: linear-gradient(100deg,#72eaff 0%,#8fb4ff 44%,#c29aff 74%,#f08cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(90,210,255,.12))
}

.sectionhead h2, .why h2, .faq h2 {
    color: #f8faff !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.42)
}

.node {
    background: rgba(4,9,18,.94) !important;
    border-color: rgba(151,193,226,.22) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.035)
}

    .node b {
        color: #f2f6ff !important;
        text-shadow: 0 1px 8px rgba(0,0,0,.5)
    }

    .node p {
        color: #aab7ca !important
    }

.core strong {
    color: #f7faff !important;
    text-shadow: 0 0 18px rgba(82,221,255,.18)
}

.core small {
    color: #8c9bb1 !important
}

.filter {
    color: #9aa8bd !important;
    background: rgba(5,10,18,.88) !important
}

    .filter.active, .filter:hover {
        color: #ffffff !important
    }

.benefit {
    background: linear-gradient(145deg,rgba(8,14,25,.95),rgba(3,7,14,.90)) !important;
    border-color: rgba(151,193,226,.18) !important
}

    .benefit h3 {
        color: #f3f6ff !important
    }

    .benefit p {
        color: #a6b3c7 !important
    }

.faq summary {
    color: #f2f6ff !important
}

.faq details p {
    color: #aab7ca !important
}

.logo-aria {
    color: #ffffff !important
}


/* FIX — visible gradient for "Experience it / many ways to experience it" */
.hero .gradient,
.sectionhead .gradient,
h1 .gradient,
h2 .gradient,
.gradient {
    display: inline-block !important;
    color: #67e8f9 !important;
    background-image: linear-gradient( 100deg, #62eaff 0%, #78c8ff 28%, #a98cff 58%, #d77bff 78%, #f08cff 100% ) !important;
    -webkit-background-image: linear-gradient( 100deg, #62eaff 0%, #78c8ff 28%, #a98cff 58%, #d77bff 78%, #f08cff 100% ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 16px rgba(105,220,255,.14)) !important;
}


/* FINAL GLOBAL HEADING COLOR OVERRIDE */
.mono-heading,
.gradient,
.hero h1 span,
.why h2 span,
.faq h2 span,
h1 span,
h2 span {
    color: #f1f3f6 !important;
    -webkit-text-fill-color: #f1f3f6 !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    filter: none !important;
    text-shadow: 0 0 7px rgba(255,255,255,.16), 0 0 24px rgba(210,218,230,.09) !important;
}


/* =========================================================
           ARIA AI NAVIGATOR — VISIBILITY + TYPOGRAPHY PASS
           ========================================================= */
.contrast-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(0,0,0,.42);
}

.page {
    z-index: 2
}

.nav {
    height: 56px;
    padding-left: 22px;
    padding-right: 20px;
    background: rgba(3,7,13,.88) !important;
    border-color: rgba(120,190,225,.20) !important;
}

.navlinks {
    gap: 26px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    font-weight: 650 !important;
}

    .navlinks a {
        color: #b9c5d7 !important
    }

        .navlinks a:hover {
            color: #fff !important;
            text-shadow: 0 0 14px rgba(100,220,255,.25)
        }

.logo img {
    width: 112px !important
}

.node {
    width: 220px !important;
    min-height: 112px !important;
    padding: 20px 21px !important;
    background: rgba(3,8,16,.95) !important;
}

    .node b {
        font-size: 17px !important;
        line-height: 1.2 !important;
        letter-spacing: -.015em;
    }

    .node p {
        font-size: 12px !important;
        line-height: 1.6 !important;
        color: #b7c2d2 !important;
    }

.dot {
    width: 8px !important;
    height: 8px !important;
    margin-right: 9px !important;
}

.core {
    width: 174px !important;
    height: 174px !important;
    border-color: rgba(89,225,255,.75) !important;
    box-shadow: 0 0 100px rgba(45,180,255,.20),inset 0 0 50px rgba(80,150,255,.16) !important;
}

    .core strong {
        font-size: 25px !important;
        letter-spacing: .10em !important;
    }

    .core small {
        font-size: 8px !important;
        letter-spacing: .26em !important;
    }

.ring {
    border-color: rgba(91,214,255,.32) !important
}

.r1 {
    border-color: rgba(82,221,255,.42) !important
}

.r2 {
    border-color: rgba(127,112,255,.30) !important
}

.r3 {
    border-color: rgba(75,150,220,.22) !important
}

.filter {
    font-size: 11px !important
}

.sectionno, .kicker {
    font-size: 11px !important
}

.sectionhead p {
    font-size: 16px !important
}

.hero p {
    font-size: 17px !important
}

@media(max-width:800px) {
    .navlinks {
        gap: 12px !important;
        font-size: 10px !important
    }

    .node {
        width: 180px !important;
        min-height: 96px !important;
        padding: 16px !important
    }

        .node b {
            font-size: 14px !important
        }

        .node p {
            font-size: 10px !important
        }

    .core {
        width: 150px !important;
        height: 150px !important
    }

        .core strong {
            font-size: 21px !important
        }
}

@media(max-width:560px) {
    .navlinks a:nth-child(2), .navlinks a:nth-child(3) {
        display: none
    }

    .node {
        width: 150px !important;
        min-height: 82px !important;
        padding: 13px !important
    }

        .node b {
            font-size: 12px !important
        }

        .node p {
            font-size: 9px !important
        }
}

#requestDemoModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: rgba(0,0,0,.76) !important;
    backdrop-filter: blur(12px) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease,visibility .2s ease;
}

    #requestDemoModal.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

.request-demo-card {
    width: min(430px,100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border: 1px solid rgba(105,232,255,.28);
    border-radius: 20px;
    background: linear-gradient(145deg,#07111f,#04070d 75%);
    box-shadow: 0 30px 90px rgba(0,0,0,.7),0 0 50px rgba(83,220,255,.10);
    color: #f4f7fb;
}

.request-demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 21px;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.request-demo-kicker {
    margin: 0 0 5px;
    color: #69e8ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase
}

.request-demo-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -.03em
}

.request-demo-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    color: #fff;
    cursor: pointer;
    font-size: 20px
}

.request-demo-body {
    padding: 20px 21px 22px
}

.request-demo-copy {
    margin: 0 0 17px;
    color: #aebdce;
    font-size: 13px;
    line-height: 1.55
}

.request-demo-field {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: #f4f8fc;
    outline: none;
    font: inherit;
    font-size: 13px
}

    .request-demo-field:focus {
        border-color: rgba(105,232,255,.65);
        box-shadow: 0 0 0 3px rgba(105,232,255,.07)
    }

.request-demo-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding-left: 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.035)
}

    .request-demo-phone span {
        color: #b9c6d5;
        font-size: 12px;
        white-space: nowrap
    }

    .request-demo-phone input {
        margin: 0;
        border: 0;
        box-shadow: none;
        background: transparent
    }

.request-demo-submit {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    margin-top: 3px;
    background: linear-gradient(90deg,#69e8ff,#8c8cff);
    color: #031018;
    font-weight: 850;
    cursor: pointer
}

    .request-demo-submit:disabled {
        opacity: .55;
        cursor: wait
    }

.request-demo-status {
    min-height: 18px;
    margin: 9px 0 0;
    color: #8d9db1;
    font-size: 11px
}

.request-demo-success {
    display: none;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(105,232,255,.18);
    background: rgba(105,232,255,.045)
}

    .request-demo-success.show {
        display: block
    }

    .request-demo-success strong {
        display: block;
        margin-bottom: 6px;
        font-size: 17px
    }

    .request-demo-success p {
        margin: 0;
        color: #aab8c9;
        font-size: 13px;
        line-height: 1.55
    }

@media(max-width:600px) {
    #requestDemoModal {
        padding: 12px
    }

    .request-demo-card {
        border-radius: 17px
    }
}

/* =========================
           ARIA NAVIGATOR — FINAL PASS
           ========================= */
/* 1. Move the main navigator clearly lower. */
.nav {
    top: 42px !important;
}

/* 2. Keep only Universe + Shivi in the navigator.
           Hide by href so this survives minor HTML differences. */
.navlinks a[href="analytics.html"],
.navlinks a[href="automate.html"] {
    display: none !important;
}

/* Give the remaining nav labels more breathing room. */
.navlinks {
    gap: 28px !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
    font-weight: 700 !important;
    color: #aab6c8 !important;
}

/* 3. Stronger black transparency wash over the animated background.
           The background remains visible, but content gets much more contrast. */
.linewaves-wash {
    background: radial-gradient(circle at 50% 46%,rgba(39,185,255,.045),transparent 34%), radial-gradient(circle at 84% 28%,rgba(145,92,255,.045),transparent 30%), linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.82)) !important;
}

#aria-linewaves {
    opacity: .64 !important;
}

.stars {
    opacity: .07 !important
}

/* 4. Make the business CTA unmistakably clickable. */
.whycta {
    position: relative !important;
    z-index: 20 !important;
    cursor: pointer !important;
}

/* CATEGORY TABS — move row lower */
.filters {
    position: relative !important;
    z-index: 20 !important;
    transform: translateY(82px) !important;
}

@media (max-width:700px) {
    .filters {
        transform: translateY(60px) !important;
    }
}



/* =========================================================
           SHIVI — PERSISTENT AI ASSISTANT
           ========================================================= */
#shivi-root {
    position: fixed !important;
    right: 22px !important;
    bottom: 20px !important;
    z-index: 2147483646 !important;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

#shivi-trigger {
    display: none !important;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(83,220,255,.55);
    background: radial-gradient(circle at 50% 35%,#22385d 0,#0a1425 58%,#040810 100%);
    box-shadow: 0 0 0 5px rgba(83,220,255,.05),0 0 35px rgba(83,220,255,.22),0 16px 45px rgba(0,0,0,.55);
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    color: white;
    transition: transform .25s ease,box-shadow .25s ease;
}

    #shivi-trigger:hover {
        transform: translateY(-4px) scale(1.04)
    }

.shivi-face {
    width: 43px;
    height: 34px;
    border-radius: 13px 13px 16px 16px;
    background: linear-gradient(180deg,#f7fbff,#cdd8e8);
    position: relative;
    box-shadow: inset 0 -5px 10px rgba(30,50,75,.12);
}

    .shivi-face:before, .shivi-face:after {
        content: "";
        position: absolute;
        top: 13px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #07101d;
    }

    .shivi-face:before {
        left: 11px
    }

    .shivi-face:after {
        right: 11px
    }

.shivi-mouth {
    position: absolute;
    left: 17px;
    top: 22px;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #16283d;
    border-radius: 0 0 10px 10px;
}

.shivi-antenna {
    position: absolute;
    left: 50%;
    top: -10px;
    width: 2px;
    height: 10px;
    background: #65ddff;
    transform: translateX(-50%);
}

    .shivi-antenna:after {
        content: "";
        position: absolute;
        top: -4px;
        left: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #65ddff;
        box-shadow: 0 0 12px #65ddff;
    }

.shivi-hand {
    position: absolute;
    right: -10px;
    top: -9px;
    font-size: 24px;
    transform-origin: 70% 80%;
    animation: shiviWave 2.2s ease-in-out infinite;
}

@keyframes shiviWave {
    0%,60%,100% {
        transform: rotate(0)
    }

    65% {
        transform: rotate(18deg)
    }

    70% {
        transform: rotate(-12deg)
    }

    75% {
        transform: rotate(18deg)
    }

    80% {
        transform: rotate(0)
    }
}

#shivi-trigger:after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #62f0a9;
    box-shadow: 0 0 14px rgba(98,240,169,.9);
}

.shivi-bubble {
    position: absolute;
    right: 6px;
    bottom: 82px;
    width: 210px;
    padding: 12px 14px;
    border-radius: 15px 15px 5px 15px;
    background: rgba(6,12,22,.96);
    border: 1px solid rgba(100,220,255,.25);
    color: #eaf5ff;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 20px 50px rgba(0,0,0,.55),0 0 30px rgba(90,210,255,.08);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: .25s ease;
}

    .shivi-bubble.show {
        opacity: 1;
        transform: translateY(0)
    }

#shivi-chat {
    position: absolute;
    right: 0;
    bottom: 84px;
    width: 360px;
    height: 500px;
    overflow: hidden;
    border: 1px solid rgba(91,221,255,.28);
    border-radius: 20px;
    background: linear-gradient(145deg,rgba(5,11,21,.985),rgba(2,6,13,.985));
    box-shadow: 0 30px 90px rgba(0,0,0,.68),0 0 45px rgba(73,203,255,.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.98);
    transform-origin: bottom right;
    pointer-events: none;
    transition: .22s ease;
}

    #shivi-chat.open {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto
    }

.shivi-head {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 18px;
    background: linear-gradient(90deg,rgba(23,46,73,.9),rgba(28,25,55,.92));
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.shivi-title {
    font-size: 16px;
    font-weight: 800;
    color: #f6f9ff
}

.shivi-sub {
    font-size: 9px;
    letter-spacing: .12em;
    color: #70e7ff;
    text-transform: uppercase;
    margin-top: 3px
}

.shivi-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.04);
    color: #eaf3ff;
    cursor: pointer;
    font-size: 18px
}

.shivi-body {
    height: 438px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.shivi-formview, .shivi-chatview {
    padding: 20px;
    height: 100%
}

.shivi-welcome {
    border: 1px solid rgba(110,220,255,.15);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    background: rgba(255,255,255,.025)
}

    .shivi-welcome strong {
        display: block;
        font-size: 19px;
        margin-bottom: 8px
    }

    .shivi-welcome p {
        margin: 0;
        color: #aab8ca;
        font-size: 13px;
        line-height: 1.55
    }

.shivi-input {
    width: 100%;
    height: 46px;
    margin-bottom: 9px;
    padding: 0 13px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(255,255,255,.035);
    color: #f3f7fc;
    outline: none;
    font-size: 13px
}

    .shivi-input:focus {
        border-color: rgba(98,221,255,.55);
        box-shadow: 0 0 0 3px rgba(98,221,255,.06)
    }

.shivi-phone {
    display: flex;
    align-items: center;
    height: 46px;
    margin-bottom: 9px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 11px;
    background: rgba(255,255,255,.035)
}

    .shivi-phone span {
        padding-left: 13px;
        color: #aab8ca;
        font-size: 12px
    }

    .shivi-phone .shivi-input {
        border: 0;
        margin: 0;
        box-shadow: none;
        height: 44px
    }

.shivi-start, .shivi-send {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(100deg,#53ddff,#7d9cff);
    color: #04101a;
    font-weight: 850;
    cursor: pointer
}

.shivi-messages {
    flex: 1;
    overflow: auto;
    padding: 2px 2px 10px;
    display: flex;
    flex-direction: column;
    gap: 9px
}

.shivi-msg {
    max-width: 84%;
    padding: 10px 12px;
    border-radius: 13px;
    font-size: 12px;
    line-height: 1.5;
    color: #e9f3fb
}

    .shivi-msg.bot {
        align-self: flex-start;
        background: rgba(83,220,255,.07);
        border: 1px solid rgba(83,220,255,.12)
    }

    .shivi-msg.user {
        align-self: flex-end;
        background: rgba(125,156,255,.16);
        border: 1px solid rgba(125,156,255,.18)
    }

.shivi-compose {
    display: flex;
    gap: 8px
}

    .shivi-compose input {
        flex: 1;
        margin: 0
    }

    .shivi-compose button {
        width: 46px;
        flex: none;
        border-radius: 11px
    }

@media(max-width:560px) {
    #shivi-root {
        right: 12px !important;
        bottom: 12px !important
    }

    #shivi-trigger {
        width: 62px;
        height: 62px
    }

    #shivi-chat {
        right: 0;
        bottom: 72px;
        width: min(350px,calc(100vw - 24px));
        height: 480px
    }
}



.logo-aria, .logo-ai {
    display: none !important
}

.logo img {
    width: 104px !important;
    height: auto !important;
    max-height: 38px !important;
    object-fit: contain
}

@media(max-width:560px) {
    .logo img {
        width: 88px !important
    }
}


/* =========================================================
   FINAL RESPONSIVE / CROSS-BROWSER MOBILE PASS
   ========================================================= */

/* Prevent accidental horizontal overflow without changing the
   actual document width. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    min-width: 0;
}

img,
canvas,
video,
svg {
    max-width: 100%;
}

/* Safari compatibility for the glass navigation. */
.nav {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* ---------- TABLET ---------- */
@media (max-width: 900px) {
    .nav {
        width: calc(100% - 28px);
        top: 18px !important;
        height: 52px;
        padding: 0 14px 0 16px;
    }

    .logo img {
        width: 96px !important;
        max-height: 34px !important;
    }

    .navlinks {
        gap: 16px !important;
        font-size: 10px !important;
        letter-spacing: .10em !important;
    }

    .hero {
        min-height: auto;
        padding: 125px 24px 90px;
    }

    h1 {
        font-size: clamp(48px, 10vw, 82px);
        line-height: .88;
    }

    .hero p {
        max-width: 650px;
        font-size: 15px !important;
    }

    .universe {
        min-height: auto;
        padding: 90px 24px 100px;
    }

    .sectionhead {
        max-width: 760px;
    }

        .sectionhead h2 {
            font-size: clamp(42px, 8vw, 68px);
        }

    .system {
        width: min(680px, 100%);
        height: 620px;
        min-height: 620px;
        margin-top: 28px;
    }

    .node {
        width: 150px !important;
        min-height: 86px !important;
        padding: 13px !important;
    }

        .node b {
            font-size: 12px !important;
        }

        .node p {
            font-size: 9px !important;
            line-height: 1.45 !important;
        }

    .core {
        width: 138px !important;
        height: 138px !important;
    }

        .core strong {
            font-size: 19px !important;
        }

    .r1 {
        width: 250px;
        height: 250px;
    }

    .r2 {
        width: 400px;
        height: 400px;
    }

    .r3 {
        width: 550px;
        height: 550px;
    }

    .filters {
        transform: none !important;
        margin: 24px auto 0;
        max-width: 680px;
        gap: 7px;
    }

    .filter {
        padding: 8px 11px;
        font-size: 9px !important;
    }

    .why {
        min-height: auto;
        padding: 100px 24px 90px;
    }

    .whygrid {
        grid-template-columns: 1fr;
        gap: 44px;
        width: min(760px, 100%);
    }

    .why h2 {
        font-size: clamp(48px, 9vw, 72px);
    }

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

    .faq {
        min-height: auto;
        padding: 100px 24px 90px;
    }

    .faq-inner {
        width: min(760px, 100%);
    }

    #shivi-root {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* ---------- PHONE ---------- */
@media (max-width: 600px) {
    .nav {
        width: calc(100% - 20px);
        top: 12px !important;
        height: 48px;
        padding: 0 10px 0 13px;
        border-radius: 24px;
    }

    .logo img {
        width: 82px !important;
        max-height: 30px !important;
    }

    .navlinks {
        gap: 10px !important;
        font-size: 8px !important;
        letter-spacing: .08em !important;
    }

        /* Keep only the two links intended for the compact mobile nav. */
        .navlinks a[href="analytics.html"],
        .navlinks a[href="automate.html"] {
            display: none !important;
        }

    .hero {
        min-height: 100svh;
        min-height: 100vh;
        padding: 105px 18px 62px;
    }

        .hero .content {
            width: 100%;
            max-width: 380px;
        }

    .kicker,
    .sectionno {
        font-size: 8px !important;
        letter-spacing: .22em;
        line-height: 1.55;
    }

    h1 {
        font-size: clamp(43px, 13vw, 64px);
        line-height: .86;
        letter-spacing: -.065em;
    }

    .hero p {
        max-width: 330px;
        margin-top: 22px;
        font-size: 12px !important;
        line-height: 1.65;
    }

    .scroll {
        margin-top: 30px;
        font-size: 7px;
        letter-spacing: .22em;
    }

        .scroll i {
            height: 34px;
            margin-top: 9px;
        }

    .universe {
        padding: 30px 14px 30px;
    }

    .sectionhead {
        width: 100%;
    }

        .sectionhead h2 {
            font-size: clamp(38px, 12vw, 54px);
            line-height: .9;
            margin: 14px 0;
        }

        .sectionhead p {
            max-width: 330px;
            font-size: 12px !important;
            line-height: 1.65;
        }

    /* The original 760px orbit is too wide for phones.
       This compact stage keeps every card inside the viewport. */
    .system {
        width: 100%;
        height: 570px;
        min-height: 570px;
        margin-top: 16px;
    }

    .core {
        width: 108px !important;
        height: 108px !important;
    }

        .core strong {
            font-size: 15px !important;
            letter-spacing: .08em !important;
        }

        .core small {
            font-size: 6px !important;
            letter-spacing: .20em !important;
            margin-top: 5px;
        }

    .ring.r1 {
        width: 205px;
        height: 205px;
    }

    .ring.r2 {
        width: 310px;
        height: 310px;
    }

    .ring.r3 {
        width: 410px;
        height: 410px;
    }

    .node {
        width: 112px !important;
        min-height: 68px !important;
        padding: 9px 10px !important;
        border-radius: 12px;
    }

        .node b {
            font-size: 10px !important;
            line-height: 1.18 !important;
        }

        .node p {
            font-size: 7px !important;
            line-height: 1.38 !important;
            margin-top: 4px;
        }

    .dot {
        width: 6px !important;
        height: 6px !important;
        margin-right: 5px !important;
    }

    .filters {
        margin-top: 18px;
        padding: 0 4px;
        transform: none !important;
        gap: 6px;
    }

    .filter {
        padding: 7px 9px;
        font-size: 7px !important;
        letter-spacing: .07em;
    }

    .why {
        padding: 40px 18px 40px;
    }

    .whygrid {
        gap: 34px;
    }

    .why h2 {
        font-size: clamp(43px, 13vw, 60px);
        line-height: .88;
        margin: 14px 0 20px;
    }

    .why .lead {
        font-size: 12px !important;
        line-height: 1.7;
    }

    .whycta {
        margin-top: 24px;
        padding: 11px 14px;
        font-size: 8px;
        line-height: 1.35;
        max-width: 100%;
    }

    .benefits {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .benefit {
        padding: 17px;
        border-radius: 15px;
    }

        .benefit span {
            font-size: 7px;
            margin-bottom: 10px;
        }

        .benefit h3 {
            font-size: 15px;
        }

        .benefit p {
            font-size: 9px;
            line-height: 1.55;
        }

    .faq {
        padding: 30px 18px 30px;
    }

    .faq-head {
        margin: 14px 0 30px;
    }

    .faq h2 {
        font-size: clamp(43px, 13vw, 60px);
        line-height: .88;
    }

    .faq-head > p {
        margin-top: 18px;
        font-size: 11px;
        line-height: 1.65;
    }

    .faq summary {
        padding: 18px 2px;
        font-size: 13px;
        line-height: 1.35;
        gap: 12px;
    }

        .faq summary:after {
            flex: none;
            font-size: 20px;
        }

    .faq details p {
        padding: 0 30px 18px 2px;
        font-size: 10px;
        line-height: 1.65;
    }

    /* Demo modal */
    #requestDemoModal {
        padding: 10px !important;
    }

    .request-demo-card {
        width: 100%;
        max-width: 380px;
        max-height: calc(100svh - 20px);
        border-radius: 15px;
    }

    .request-demo-head {
        padding: 15px 16px;
    }

    .request-demo-body {
        padding: 16px;
    }

    .request-demo-title {
        font-size: 21px;
    }

    .request-demo-copy {
        font-size: 11px;
    }

    /* Shivi */
    #shivi-root {
        right: 10px !important;
        bottom: 10px !important;
    }

    #shivi-trigger {
        width: 58px !important;
        height: 58px !important;
    }

    #shivi-chat {
        right: 0 !important;
        bottom: 68px !important;
        width: min(360px, calc(100vw - 20px)) !important;
        height: min(480px, calc(100svh - 88px)) !important;
        border-radius: 16px;
    }

    .shivi-head {
        height: 56px;
        padding: 0 12px 0 14px;
    }

    .shivi-title {
        font-size: 14px;
    }

    .shivi-formview,
    .shivi-chatview {
        padding: 14px;
    }

    .shivi-welcome {
        padding: 14px;
    }

        .shivi-welcome strong {
            font-size: 16px;
        }

        .shivi-welcome p {
            font-size: 11px;
        }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 380px) {
    .navlinks {
        gap: 7px !important;
        font-size: 7px !important;
    }

    .logo img {
        width: 76px !important;
    }

    .hero {
        padding-left: 14px;
        padding-right: 14px;
    }

    h1 {
        font-size: clamp(38px, 12.5vw, 52px);
    }

    .system {
        height: 535px;
        min-height: 535px;
    }

    .node {
        width: 100px !important;
        min-height: 62px !important;
        padding: 8px !important;
    }

        .node b {
            font-size: 9px !important;
        }

        .node p {
            font-size: 6.5px !important;
        }

    .ring.r1 {
        width: 185px;
        height: 185px;
    }

    .ring.r2 {
        width: 280px;
        height: 280px;
    }

    .ring.r3 {
        width: 370px;
        height: 370px;
    }
}

/* Reduced-motion support for users/browsers that request it. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* ARIA AI CONTENT EXPANSION */
.hero-proof {
    margin-top: 18px !important;
    color: #a8b3c8 !important
}

    .hero-proof strong {
        color: #f5f7ff
    }

.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px
}

.whycta.secondary {
    background: transparent;
    border-color: rgba(120,155,255,.35)
}

.content-section {
    position: relative;
    padding: 100px 6vw;
    border-top: 1px solid rgba(255,255,255,.05);
    z-index: 2
}

    .content-section h2 {
        font-size: clamp(44px,6vw,82px);
        line-height: .94;
        letter-spacing: -.065em;
        margin: 18px 0 28px
    }

    .content-section .lead {
        font-size: 18px;
        line-height: 1.7;
        color: #a0aabd
    }

.content-split {
    display: grid;
    grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr);
    gap: 70px;
    align-items: start
}

    .content-split > div:first-child {
        position: sticky;
        top: 110px
    }

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

    .workflow-steps article, .mini-grid article, .problem-grid article {
        padding: 24px;
        border: 1px solid rgba(110,140,200,.18);
        border-radius: 16px;
        background: rgba(8,14,28,.62)
    }

        .workflow-steps article span, .benefit span {
            font-size: 10px;
            letter-spacing: .18em;
            color: #55dcff
        }

    .workflow-steps h3, .mini-grid h3, .problem-grid h3 {
        margin: 10px 0 7px;
        font-size: 18px
    }

    .workflow-steps p, .mini-grid p, .problem-grid p {
        margin: 0;
        color: #7f8ba1;
        line-height: 1.6;
        font-size: 14px
    }

.content-callout {
    margin-top: 34px;
    padding: 28px;
    border-left: 2px solid #55dcff;
    background: linear-gradient(90deg,rgba(73,151,255,.08),transparent);
    color: #9da9bd;
    line-height: 1.75
}

    .content-callout strong {
        display: block;
        color: #f5f7ff;
        margin-top: 14px;
        font-size: 18px
    }

.mini-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 28px
}

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

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

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 25px 0
}

    .pill-row span {
        padding: 9px 13px;
        border: 1px solid rgba(115,145,205,.24);
        border-radius: 999px;
        color: #aab5c8;
        font-size: 11px;
        letter-spacing: .06em
    }

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 28px
}

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

.final-message {
    padding-bottom: 140px
}

@media(max-width:900px) {
    .content-split {
        grid-template-columns: 1fr;
        gap: 35px
    }

        .content-split > div:first-child {
            position: static
        }

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

@media(max-width:600px) {
    .content-section {
        padding: 70px 6vw
    }

    .workflow-steps, .mini-grid, .mini-grid.six, .mini-grid.eight, .problem-grid, .human {
        grid-template-columns: 1fr
    }

    .content-section h2 {
        font-size: 44px
    }
}

/* ============================================================
   ARIA AI — CONTENT PRESENTATION / INFORMATION HIERARCHY
   Visual formatting layer for the expanded ARIA AI content.
   Keeps the existing content, motion and interactions intact.
   ============================================================ */

.content-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(88px, 9vw, 132px) clamp(24px, 6vw, 88px);
    isolation: isolate;
}

    .content-section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background: radial-gradient(circle at 8% 20%, rgba(82,221,255,.055), transparent 30%), radial-gradient(circle at 92% 75%, rgba(167,124,255,.045), transparent 34%);
    }

    .content-section + .content-section {
        border-top: 1px solid rgba(255,255,255,.065);
    }

.sectionno {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 7px 11px;
    border: 1px solid rgba(94,220,255,.16);
    border-radius: 999px;
    background: rgba(7,14,27,.48);
    color: #6edfff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
}

    .sectionno::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #55dcff;
        box-shadow: 0 0 12px rgba(85,220,255,.8);
    }

.content-section h2 {
    max-width: 820px;
    font-size: clamp(42px, 5.2vw, 76px);
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.content-section > h2 {
    margin-bottom: 42px;
}

.content-section p {
    max-width: 760px;
    font-size: 15px;
    line-height: 1.8;
    color: #8793a9;
}

.content-section .lead {
    max-width: 720px;
    font-size: clamp(17px, 1.45vw, 20px);
    line-height: 1.72;
    color: #b0bacb;
}

.content-split {
    max-width: 1250px;
    margin: 0 auto;
    grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr);
    gap: clamp(44px, 7vw, 96px);
}

    .content-split > div:first-child {
        top: 100px;
    }

/* Give every information card a consistent visual language. */
.workflow-steps article,
.mini-grid article,
.problem-grid article,
.benefit {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 25px 24px;
    border: 1px solid rgba(117,148,210,.16);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(15,24,45,.82), rgba(6,11,23,.72));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 45px rgba(0,0,0,.12);
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

    .workflow-steps article::after,
    .mini-grid article::after,
    .problem-grid article::after,
    .benefit::after {
        content: "";
        position: absolute;
        width: 90px;
        height: 90px;
        right: -42px;
        top: -48px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(82,221,255,.11), transparent 68%);
        pointer-events: none;
    }

    .workflow-steps article:hover,
    .mini-grid article:hover,
    .problem-grid article:hover,
    .benefit:hover {
        transform: translateY(-4px);
        border-color: rgba(82,221,255,.34);
        background: linear-gradient(145deg, rgba(17,31,57,.9), rgba(7,13,27,.82));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 20px 55px rgba(0,0,0,.22), 0 0 30px rgba(82,221,255,.035);
    }

    .workflow-steps h3,
    .mini-grid h3,
    .problem-grid h3,
    .benefit h3 {
        position: relative;
        z-index: 1;
        margin: 9px 0 9px;
        font-size: clamp(16px, 1.3vw, 19px);
        line-height: 1.25;
        letter-spacing: -.02em;
        color: #f4f7ff;
    }

    .workflow-steps p,
    .mini-grid p,
    .problem-grid p,
    .benefit p {
        position: relative;
        z-index: 1;
        margin: 0;
        color: #8d99ad;
        line-height: 1.65;
    }

    .workflow-steps article span,
    .benefit span {
        position: relative;
        z-index: 1;
        display: block;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .2em;
        color: #55dcff;
    }

.workflow-steps {
    gap: 14px;
}

.workflow-section .content-callout {
    max-width: 1050px;
    margin: 42px auto 0;
}

.content-callout {
    position: relative;
    padding: 27px 30px 27px 32px;
    border: 1px solid rgba(82,221,255,.11);
    border-left: 2px solid #55dcff;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(90deg, rgba(73,151,255,.09), rgba(73,151,255,.018), transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    color: #9ca8ba;
    line-height: 1.8;
}

    .content-callout strong {
        color: #f4f7ff;
        font-weight: 700;
    }

/* WHY ARIA */
.why {
    max-width: none;
    padding-left: max(6vw, calc((100vw - 1264px) / 2));
    padding-right: max(6vw, calc((100vw - 1264px) / 2));
}

.whygrid {
    max-width: 1264px;
    margin: 0 auto;
    gap: clamp(45px, 7vw, 100px);
}

.benefits {
    gap: 14px;
}

.benefit {
    min-height: 185px;
}

/* Problem / application cards */
.problem-grid {
    gap: 14px;
}

    .problem-grid article {
        min-height: 145px;
    }

        .problem-grid article strong {
            color: #dce7ff;
        }

/* Industry / integration / capability grids */
.mini-grid {
    gap: 14px;
    margin-top: 30px;
}

    .mini-grid.six {
        gap: 14px;
    }

    .mini-grid.eight {
        gap: 14px;
    }

.pill-row {
    gap: 10px;
    margin: 28px 0 30px;
}

    .pill-row span {
        padding: 10px 14px;
        background: rgba(10,17,31,.65);
        border-color: rgba(115,145,205,.22);
        transition: border-color .2s ease, color .2s ease, transform .2s ease;
    }

        .pill-row span:hover {
            color: #eef7ff;
            border-color: rgba(85,220,255,.45);
            transform: translateY(-2px);
        }

/* Human-in-the-loop section */
.human article {
    min-height: 155px;
}

    .human article:nth-child(2) {
        border-color: rgba(167,124,255,.2);
    }

    .human article:nth-child(3) {
        border-color: rgba(255,198,77,.2);
    }

/* FAQ — make the long content scannable instead of a wall of text. */
.faq {
    max-width: none;
}

.faq-inner {
    max-width: 1120px;
    margin: 0 auto;
}

.faq-head {
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(280px,.75fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 46px;
}

    .faq-head h2 {
        margin: 0;
    }

    .faq-head > p {
        max-width: 480px;
        margin: 0;
        font-size: 16px;
        line-height: 1.75;
        color: #929db0;
    }

.faq-list {
    display: grid;
    gap: 9px;
}

.faq details {
    overflow: hidden;
    border: 1px solid rgba(117,148,210,.14);
    border-radius: 14px;
    background: rgba(8,14,28,.58);
    transition: border-color .25s ease, background .25s ease;
}

    .faq details:hover,
    .faq details[open] {
        border-color: rgba(82,221,255,.27);
        background: rgba(10,18,34,.78);
    }

.faq summary {
    position: relative;
    padding: 21px 55px 21px 22px;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
    color: #edf3ff;
    cursor: pointer;
    list-style: none;
}

    .faq summary::-webkit-details-marker {
        display: none;
    }

    .faq summary::after {
        content: "+";
        position: absolute;
        right: 22px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        font-weight: 300;
        color: #65dfff;
        transition: transform .25s ease;
    }

.faq details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq details p {
    max-width: 850px;
    margin: 0;
    padding: 0 55px 23px 22px;
    font-size: 14px;
    line-height: 1.8;
    color: #929db0;
}

/* Final CTA should feel like a destination, not another content block. */
.final-message {
    max-width: 1180px;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 150px;
    text-align: center;
}

    .final-message .sectionno,
    .final-message h2,
    .final-message p {
        margin-left: auto;
        margin-right: auto;
    }

    .final-message h2 {
        max-width: 1500px;
        font-size: clamp(38px, 4.7vw, 76px);
        line-height: .98;
        letter-spacing: -.065em;
    }

/* Keep the paired hero statements on one line on desktop. */
.final-hero-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}

    .final-hero-lines span {
        display: block;
    }

    .final-hero-lines b {
        font-weight: 900;
    }

@media (max-width: 1100px) {
    .final-message h2 {
        font-size: clamp(34px, 4.9vw, 58px);
    }
}

@media (max-width: 760px) {
    .final-hero-lines {
        white-space: normal;
    }

    .final-message h2 {
        font-size: clamp(38px, 10vw, 54px);
        line-height: 1;
    }

    .final-hero-lines span {
        display: block;
    }
}

.final-message .lead {
    max-width: 650px;
    margin-top: 12px;
}

.final-message .hero-actions {
    margin-top: 30px;
}

/* Better section rhythm and alternating depth without changing content. */
.content-section:nth-of-type(4),
.content-section:nth-of-type(7),
.content-section:nth-of-type(10),
.content-section:nth-of-type(13) {
    background: linear-gradient(180deg, rgba(8,13,25,.15), rgba(8,13,25,.38));
}

/* Long headings should never collide with the card column. */
@media (min-width: 901px) {
    .content-section:not(.why):not(.faq):not(.final-message) > .content-split,
    .content-section:not(.why):not(.faq):not(.final-message) > .mini-grid,
    .content-section:not(.why):not(.faq):not(.final-message) > .problem-grid,
    .content-section:not(.why):not(.faq):not(.final-message) > .content-callout {
        position: relative;
    }
}

@media (max-width: 900px) {
    .content-section {
        padding: 82px 6vw;
    }

    .content-split {
        gap: 32px;
    }

    .faq-head {
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
    }

    .benefit {
        min-height: 0;
    }

    .final-message {
        min-height: 560px;
    }
}

@media (max-width: 600px) {
    .content-section {
        padding: 68px 5.5vw;
    }

    .sectionno {
        max-width: 100%;
        font-size: 8px;
        letter-spacing: .14em;
    }

    .content-section h2 {
        font-size: clamp(38px, 12vw, 52px);
        line-height: .98;
    }

    .content-section .lead {
        font-size: 16px;
    }

    .workflow-steps article,
    .mini-grid article,
    .problem-grid article,
    .benefit {
        padding: 22px 20px;
        border-radius: 15px;
    }

    .content-callout {
        padding: 22px 20px 22px 22px;
    }

    .faq summary {
        padding: 18px 48px 18px 18px;
        font-size: 14px;
    }

    .faq details p {
        padding: 0 18px 20px;
        font-size: 13px;
    }

    .final-message {
        min-height: 520px;
        padding-top: 90px;
        padding-bottom: 110px;
    }

        .final-message h2 {
            font-size: clamp(43px, 12vw, 64px);
        }
}


/* =========================================================
   ARIA AI — FINAL HEADER NAVIGATION
   Products mega-menu + Login menu + Pricing/API links
   ========================================================= */
.nav {
    width: min(1288px, calc(100% - 56px));
    height: 64px;
    padding: 0 22px 0 26px;
    top: 28px;
    border-radius: 34px;
    background: rgba(4, 8, 15, .84) !important;
    border: 1px solid rgba(137, 206, 235, .18) !important;
    box-shadow: 0 16px 50px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
}

.navlinks {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px !important;
    height: 100%;
    font-size: 12px !important;
    letter-spacing: .105em !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

    .navlinks > a,
    .nav-trigger {
        display: inline-flex;
        align-items: center;
        height: 100%;
        color: #aeb9ca !important;
        text-decoration: none;
        transition: color .2s ease, text-shadow .2s ease;
    }

        .navlinks > a:hover,
        .nav-trigger:hover {
            color: #fff !important;
            text-shadow: 0 0 14px rgba(100,220,255,.25);
        }

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Products mega menu */
.nav-products .nav-trigger {
    cursor: pointer;
}

.products-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 720px;
    padding: 28px 28px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid rgba(124, 196, 229, .17);
    border-radius: 22px;
    background: rgba(7, 8, 18, .97);
    box-shadow: 0 28px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.025) inset;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 100;
}

    .products-menu::before,
    .login-menu::before {
        content: "";
        position: absolute;
        top: -6px;
        width: 11px;
        height: 11px;
        background: rgba(7,8,18,.97);
        border-left: 1px solid rgba(124,196,229,.17);
        border-top: 1px solid rgba(124,196,229,.17);
        transform: rotate(45deg);
    }

    .products-menu::before {
        left: 50%;
        margin-left: -6px;
    }

.nav-products:hover .products-menu,
.nav-products:focus-within .products-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.products-column + .products-column {
    border-left: 1px solid rgba(255,255,255,.08);
    padding-left: 30px;
}

.products-label {
    margin: 1px 0 17px;
    color: #a17cff;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.product-entry {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    margin: 0 0 7px;
    border-radius: 10px;
    color: #e9eef8 !important;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease, color .18s ease;
}

    .product-entry:hover {
        background: rgba(91, 187, 236, .075);
        transform: translateX(3px);
    }

    .product-entry strong {
        font-size: 15px;
        line-height: 1.15;
        font-weight: 750;
        letter-spacing: -.015em;
        text-transform: uppercase;
    }

    .product-entry span {
        color: #737b90;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

/* Login */
.nav-login {
    margin-left: 4px;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 44px !important;
    padding: 0 20px;
    border: 1px solid rgba(181, 119, 255, .48);
    border-radius: 24px;
    color: #f4efff !important;
    background: linear-gradient(135deg, rgba(151,91,255,.18), rgba(89,57,160,.13));
    box-shadow: inset 0 0 18px rgba(168,106,255,.08), 0 0 20px rgba(110,70,190,.08);
    text-decoration: none;
}

    .login-btn:hover,
    .nav-login:hover .login-btn {
        border-color: rgba(201,155,255,.75);
        background: linear-gradient(135deg, rgba(164,101,255,.27), rgba(89,57,160,.18));
        color: #fff !important;
    }

.login-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 235px;
    padding: 13px;
    border: 1px solid rgba(124,196,229,.17);
    border-radius: 18px;
    background: rgba(7,8,18,.97);
    box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.025) inset;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 110;
}

    .login-menu::before {
        right: 33px;
    }

.nav-login:hover .login-menu,
.nav-login:focus-within .login-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.login-menu a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 12px;
    border-radius: 10px;
    color: #edf1f8 !important;
    text-decoration: none;
    transition: background .18s ease;
}

    .login-menu a:hover {
        background: rgba(91,187,236,.075);
    }

.login-menu strong {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 750;
}

.login-menu span {
    color: #727b90;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: .02em;
}

/* Keep the mega menu usable on smaller desktop widths. */
@media (max-width: 1180px) and (min-width: 901px) {
    .nav {
        width: calc(100% - 36px);
        padding-left: 18px;
        padding-right: 16px;
    }

    .navlinks {
        gap: 18px !important;
        font-size: 10px !important;
    }

    .products-menu {
        width: 660px;
    }
}

@media (max-width: 900px) {
    .nav {
        width: calc(100% - 28px);
        top: 18px !important;
        height: 56px;
        padding: 0 14px 0 18px;
    }

    .navlinks {
        gap: 13px !important;
        font-size: 9px !important;
        letter-spacing: .08em !important;
    }

    .products-menu {
        width: min(620px, calc(100vw - 42px));
        right: -10px;
        left: auto;
        transform: translateY(-8px);
        grid-template-columns: 1fr 1fr;
    }

    .nav-products:hover .products-menu,
    .nav-products:focus-within .products-menu {
        transform: translateY(0);
    }
}

@media (max-width: 680px) {
    .nav {
        width: calc(100% - 20px);
        padding: 0 10px 0 14px;
    }

    .logo img {
        width: 92px !important;
    }

    .navlinks {
        gap: 8px !important;
        font-size: 8px !important;
    }

        .navlinks > a:not(.nav-trigger),
        .navlinks .nav-products + a,
        .navlinks .nav-products ~ a:not(:last-of-type) {
            display: none;
        }

    .nav-trigger {
        font-size: 9px;
    }

    .login-btn {
        min-width: 70px;
        height: 38px !important;
        padding: 0 14px;
    }

    .products-menu {
        position: fixed;
        top: 84px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: calc(100vh - 104px);
        overflow-y: auto;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 16px;
        transform: translateY(-8px);
    }

    .nav-products:hover .products-menu,
    .nav-products:focus-within .products-menu {
        transform: translateY(0);
    }

    .products-column + .products-column {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        padding-left: 0;
        padding-top: 20px;
    }

    .login-menu {
        position: fixed;
        top: 84px;
        right: 10px;
    }
}



/* =========================================================
   ARIA HEADER - MOBILE RESPONSIVE
========================================================= */

.nav {
    position: fixed;
    z-index: 1000;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1000px, calc(100% - 30px));
    min-height: 56px;
    padding: 0 16px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
    background: rgba(3,7,14,.90);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-sizing: border-box;
}

.logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

    .logo img {
        display: block;
        width: 105px;
        height: auto;
        max-width: 100%;
    }


/* Desktop Navigation */
.navlinks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .10em;
    color: #aeb9cc;
}

    .navlinks > a {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        color: #b9c5d7;
        text-decoration: none;
    }

        .navlinks > a:hover {
            color: #ffffff;
        }


    /* Products / Login wrapper */
    .navlinks .nav-item {
        position: relative;
        display: flex;
        align-items: center;
    }


    /* Product dropdown */
    .navlinks .products-menu,
    .navlinks .login-menu {
        position: absolute;
        top: calc(100% + 0px);
        left: -22%;
        transform: translateX(-50%) translateY(8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .2s ease;
        z-index: 2000;
    }

    .navlinks .nav-products:hover .products-menu,
    .navlinks .nav-login:hover .login-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .nav {
        top: 10px;
        width: calc(100% - 16px);
        min-height: 58px;
        height: 58px;
        padding: 0 10px 0 14px;
        border-radius: 17px;
    }

    .logo {
        flex: 1;
    }

        .logo img {
            width: 88px;
        }


    /* Hide normal navigation on mobile */
    .navlinks {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        padding: 10px;
        border: 1px solid rgba(120,190,225,.18);
        border-radius: 17px;
        background: rgba(3,7,14,.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 25px 60px rgba(0,0,0,.50);
        box-sizing: border-box;
    }


        /* Mobile links */
        .navlinks > a {
            width: 100%;
            min-height: 44px;
            padding: 11px 12px;
            border-radius: 9px;
            font-size: 11px;
            letter-spacing: .08em;
        }


            .navlinks > a:hover {
                background: rgba(82,221,255,.06);
            }


        /* Products */
        .navlinks .nav-item {
            width: 100%;
            display: block;
        }

        .navlinks .nav-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 44px;
            padding: 11px 12px;
            border-radius: 9px;
            box-sizing: border-box;
        }


        /* Product menu */
        .navlinks .products-menu {
            position: static;
            width: 100%;
            min-width: 0;
            display: none;
            transform: none;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            margin-top: 5px;
            padding: 8px;
            border: 1px solid rgba(255,255,255,.10);
            border-radius: 13px;
            background: rgba(255,255,255,.025);
            box-shadow: none;
        }


        /* Login */
        .navlinks .nav-login {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .navlinks .login-btn {
            width: 100%;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }

        .navlinks .login-menu {
            position: static;
            width: 100%;
            min-width: 0;
            display: none;
            transform: none;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            margin-top: 5px;
            padding: 7px;
            border-radius: 12px;
            background: rgba(255,255,255,.025);
            box-shadow: none;
        }


        /* Remove desktop underline */
        .navlinks a::after {
            display: none !important;
        }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .nav {
        width: calc(100% - 12px);
        height: 54px;
        min-height: 54px;
        padding-left: 12px;
        padding-right: 9px;
        border-radius: 16px;
    }

    .logo img {
        width: 84px;
    }

    .navlinks {
        top: calc(100% + 7px);
        padding: 8px;
        border-radius: 15px;
    }

        .navlinks > a,
        .navlinks .nav-trigger {
            min-height: 42px;
            font-size: 10px;
        }
}



/* =========================================================
   ARIA HEADER ONLY
   FINAL MOBILE FIX
========================================================= */

/* Desktop */
.nav {
    position: fixed !important;
    top: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1288px, calc(100% - 56px)) !important;
    height: 64px !important;
    padding: 0 22px 0 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 5000 !important;
    overflow: visible !important;
}

.logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
}

    .logo img {
        width: 104px !important;
        height: auto !important;
        max-height: 38px !important;
        display: block !important;
    }


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.mobile-nav-toggle {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .nav {
        top: 10px !important;
        left: 50% !important;
        width: calc(100% - 16px) !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 9px 0 14px !important;
        border-radius: 17px !important;
        overflow: visible !important;
    }


        /* Logo always LEFT */
        .nav > .logo {
            order: 1 !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

            .nav > .logo img {
                width: 88px !important;
                max-width: 100% !important;
                max-height: 32px !important;
            }


        /* Hamburger always RIGHT */
        .nav > .mobile-nav-toggle {
            order: 2 !important;
            display: flex !important;
            position: relative !important;
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            flex: 0 0 40px !important;
            margin: 0 0 0 auto !important;
            padding: 0 !important;
            align-items: center !important;
            justify-content: center !important;
            flex-direction: column !important;
            gap: 5px !important;
            border: 1px solid rgba(120,190,225,.28) !important;
            border-radius: 10px !important;
            background: rgba(255,255,255,.04) !important;
            cursor: pointer !important;
            z-index: 6000 !important;
        }

    .mobile-nav-toggle span {
        display: block !important;
        width: 19px !important;
        height: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50px !important;
        background: #ffffff !important;
        transition: transform .22s ease, opacity .22s ease !important;
    }


    /* =====================================================
       NAVLINKS CLOSED
    ===================================================== */

    .nav > .navlinks {
        order: 3 !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 80px) !important;
        margin: 0 !important;
        padding: 9px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: rgba(3,7,14,.98) !important;
        border: 1px solid rgba(120,190,225,.20) !important;
        border-radius: 17px !important;
        box-shadow: 0 25px 65px rgba(0,0,0,.60) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 5500 !important;
    }


    /* =====================================================
       NAVLINKS OPEN
    ===================================================== */

    .nav.mobile-open > .navlinks {
        display: flex !important;
    }


    /* =====================================================
       NORMAL LINKS
    ===================================================== */

    .navlinks > a {
        display: flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        padding: 11px 12px !important;
        margin: 0 !important;
        border-radius: 9px !important;
        color: #b9c5d7 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .08em !important;
        box-sizing: border-box !important;
    }

        .navlinks > a:hover {
            color: #fff !important;
            background: rgba(82,221,255,.07) !important;
        }


    /* Remove old desktop underline */
    .navlinks a::after {
        display: none !important;
    }


    /* =====================================================
       PRODUCTS
    ===================================================== */

    .navlinks .nav-item {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .navlinks .nav-trigger {
        display: flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 11px 12px !important;
        box-sizing: border-box !important;
    }


    .navlinks .products-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        display: none !important;
        margin: 5px 0 0 !important;
        padding: 8px !important;
        transform: none !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.025) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: none !important;
    }

    .navlinks .nav-products.mobile-product-open .products-menu {
        display: block !important;
    }


    /* =====================================================
       LOGIN
    ===================================================== */

    .navlinks .nav-login {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .navlinks .login-btn {
        width: 100% !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .navlinks .login-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        display: none !important;
        margin-top: 5px !important;
        padding: 7px !important;
        transform: none !important;
        background: rgba(255,255,255,.025) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: none !important;
    }

    .navlinks .nav-login.mobile-login-open .login-menu {
        display: block !important;
    }


    /* =====================================================
       HAMBURGER -> X
    ===================================================== */

    .nav.mobile-open > .mobile-nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .nav.mobile-open > .mobile-nav-toggle span:nth-child(2) {
        opacity: 0 !important;
    }

    .nav.mobile-open > .mobile-nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .nav {
        width: calc(100% - 12px) !important;
        height: 54px !important;
        min-height: 54px !important;
        top: 8px !important;
        padding-left: 12px !important;
        padding-right: 8px !important;
    }

        .nav > .logo img {
            width: 84px !important;
        }

        .nav > .mobile-nav-toggle {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            flex-basis: 38px !important;
        }

            .nav > .mobile-nav-toggle span {
                width: 18px !important;
            }

        .nav > .navlinks {
            top: calc(100% + 7px) !important;
            max-height: calc(100vh - 72px) !important;
            padding: 8px !important;
            border-radius: 15px !important;
        }
}

/* =========================================================
   FINAL HEADER FIX ONLY
   Existing page styles are preserved.
   This block only fixes the ARIA header on mobile.
========================================================= */

/* ---------- DESKTOP HEADER BASE ---------- */

.nav {
    position: fixed !important;
    z-index: 5000 !important;
    top: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1288px, calc(100% - 56px)) !important;
    height: 64px !important;
    padding: 0 22px 0 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
}

.logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

    .logo img {
        display: block !important;
        width: 104px !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 38px !important;
        object-fit: contain !important;
    }


/* Normal desktop nav */
.navlinks {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    letter-spacing: .105em !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}


    /* Desktop nav links */
    .navlinks > a {
        display: inline-flex !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #b9c5d7 !important;
        text-decoration: none !important;
    }

        .navlinks > a:hover {
            color: #ffffff !important;
        }


    /* Product/Login wrappers */
    .navlinks .nav-item {
        position: relative !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }


/* =========================================================
   MOBILE TOGGLE
   Button is outside <nav>, so it is positioned independently.
========================================================= */

.mobile-nav-toggle {
    display: none !important;
    position: fixed !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    border: 1px solid rgba(120,190,225,.25) !important;
    border-radius: 11px !important;
    background: rgba(3,8,15,.92) !important;
    cursor: pointer !important;
    z-index: 6000 !important;
}

    .mobile-nav-toggle span {
        display: block !important;
        width: 19px !important;
        height: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        transition: transform .22s ease, opacity .22s ease !important;
    }


/* =========================================================
   MOBILE HEADER
========================================================= */

@media (max-width: 800px) {

    /* Header */
    .nav {
        top: 10px !important;
        width: calc(100% - 16px) !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 10px 0 14px !important;
        border-radius: 17px !important;
        overflow: visible !important;
    }

    .logo {
        width: auto !important;
        flex: 1 1 auto !important;
    }

        .logo img {
            width: 88px !important;
            max-height: 32px !important;
        }


    /* Toggle: fixed because the HTML button is outside nav */
    .mobile-nav-toggle {
        display: flex !important;
        top: 19px !important;
        right: 18px !important;
    }


    /* =====================================================
       MOBILE NAV PANEL
    ===================================================== */

    .navlinks {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 88px) !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 9px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(120,190,225,.18) !important;
        border-radius: 17px !important;
        background: rgba(3,7,14,.98) !important;
        backdrop-filter: blur(22px) !important;
        -webkit-backdrop-filter: blur(22px) !important;
        box-shadow: 0 25px 65px rgba(0,0,0,.60) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 5500 !important;
    }


    /* Open */
    .nav.mobile-open .navlinks {
        display: flex !important;
    }


    /* =====================================================
       ALL TOP LEVEL LINKS
    ===================================================== */

    .navlinks > a,
    .navlinks > a:nth-child(2),
    .navlinks > a:nth-child(3),
    .navlinks > a:nth-child(4),
    .navlinks > a:nth-child(5) {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        border-radius: 9px !important;
        color: #b9c5d7 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: .08em !important;
        box-sizing: border-box !important;
    }

        .navlinks > a:hover {
            color: #ffffff !important;
            background: rgba(82,221,255,.07) !important;
        }


    /* Remove desktop line/underline effects */
    .navlinks a::after {
        display: none !important;
    }


    /* =====================================================
       PRODUCTS
    ===================================================== */

    .navlinks .nav-products {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        flex: 0 0 auto !important;
    }

    .navlinks .nav-trigger {
        display: flex !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        box-sizing: border-box !important;
        border-radius: 9px !important;
        color: #b9c5d7 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .08em !important;
    }

        .navlinks .nav-trigger::after {
            content: "⌄" !important;
            position: static !important;
            display: block !important;
            margin-left: auto !important;
            color: #8290a4 !important;
            font-size: 14px !important;
            line-height: 1 !important;
            transform: none !important;
            transition: transform .2s ease !important;
        }


    /* Product dropdown hidden until clicked */
    .navlinks .products-menu,
    .navlinks .nav-products:hover .products-menu,
    .navlinks .nav-products:focus-within .products-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: none !important;
        grid-template-columns: 1fr !important;
        margin: 5px 0 0 !important;
        padding: 8px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.025) !important;
        box-shadow: none !important;
    }

    .navlinks .nav-products.mobile-product-open .products-menu {
        display: grid !important;
    }

    .navlinks .nav-products.mobile-product-open .nav-trigger::after {
        transform: rotate(180deg) !important;
    }


    /* Product columns */
    .navlinks .products-column {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 3px 0 7px !important;
        border: 0 !important;
    }

        .navlinks .products-column + .products-column {
            margin-top: 7px !important;
            padding-top: 11px !important;
            border-top: 1px solid rgba(255,255,255,.08) !important;
            border-left: 0 !important;
        }

    .navlinks .products-label {
        margin: 3px 7px 7px !important;
        color: #a17cff !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        letter-spacing: .15em !important;
    }

    .navlinks .product-entry {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 1px 0 !important;
        padding: 8px 9px !important;
        border-radius: 8px !important;
        color: #edf2f8 !important;
    }

        .navlinks .product-entry strong {
            font-size: 10px !important;
            line-height: 1.2 !important;
        }

        .navlinks .product-entry span {
            margin-top: 2px !important;
            color: #778398 !important;
            font-size: 8px !important;
            line-height: 1.35 !important;
        }

        .navlinks .product-entry:hover {
            background: rgba(82,221,255,.055) !important;
            transform: none !important;
        }


    /* =====================================================
       LOGIN
    ===================================================== */

    .navlinks .nav-login {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
        margin: 3px 0 0 !important;
    }

    .navlinks .login-btn {
        display: flex !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }


    /* Login menu only after click */
    .navlinks .login-menu,
    .navlinks .nav-login:hover .login-menu,
    .navlinks .nav-login:focus-within .login-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        display: none !important;
        margin: 5px 0 0 !important;
        padding: 7px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.025) !important;
        box-shadow: none !important;
    }

    .navlinks .nav-login.mobile-login-open .login-menu {
        display: block !important;
    }

    .navlinks .login-menu a {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

        .navlinks .login-menu a + a {
            margin-top: 3px !important;
        }


    /* =====================================================
       TOGGLE X STATE
    ===================================================== */

    .nav.mobile-open ~ .mobile-nav-toggle {
        /* Kept for compatibility if DOM is ever reordered */
        display: flex !important;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 560px) {

    .nav {
        top: 8px !important;
        width: calc(100% - 12px) !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 8px 0 12px !important;
        border-radius: 16px !important;
    }

    .logo img {
        width: 84px !important;
        max-height: 30px !important;
    }

    .mobile-nav-toggle {
        top: 15px !important;
        right: 14px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
        border-radius: 10px !important;
    }

        .mobile-nav-toggle span {
            width: 18px !important;
        }

    .navlinks {
        top: calc(100% + 7px) !important;
        max-height: calc(100vh - 72px) !important;
        padding: 8px !important;
        border-radius: 15px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .nav {
        width: calc(100% - 10px) !important;
    }

    .logo img {
        width: 82px !important;
    }

    .mobile-nav-toggle {
        top: 14px !important;
        right: 12px !important;
        width: 37px !important;
        height: 37px !important;
        min-width: 37px !important;
        min-height: 37px !important;
    }

        .mobile-nav-toggle span {
            width: 17px !important;
        }
}




/* =========================================================
   DESKTOP HEADER - LOGO LEFT / NAV RIGHT
========================================================= */

@media (min-width: 801px) {

    .nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-direction: row !important;
    }

        .nav > .logo {
            order: 1 !important;
            margin-left: 0 !important;
            margin-right: auto !important;
            display: flex !important;
            align-items: center !important;
        }

        .nav > .navlinks {
            order: 2 !important;
            margin-left: auto !important;
            margin-right: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
        }

        .nav > .logo img {
            width: 104px !important;
            height: auto !important;
            display: block !important;
        }
}