@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }
body{font-family: "Microsoft YaHei", Arial;}
    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {

    }

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

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

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .visible {
        visibility: visible
    }

    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .table {
        display: table
    }
}

:root {
    --content-width: 1380px;
    --ink: #0b1d35;
    --muted: #617087;
    --blue: #1168ff;
    --cyan: #42d7ff;
    --line: #dce3eb;
    --cream: #f3f0e8;
    --navy: #061b33;
    --white: #fff
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    background: #fff;
    margin: 0;
    font-family: "Microsoft YaHei", Arial;
}

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

button,
input,
select,
textarea {
    font: inherit
}

button {
    color: inherit
}

main {
    overflow: hidden
}

.site-header {
    z-index: 20;
    width: min(var(--content-width), calc(100% - 80px));
    color: #fff;
    border-bottom: 1px solid #fff3;
    align-items: center;
    height: 84px;
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.brand {
    align-items: center;
    gap: 11px;
    display: inline-flex
}

.brand-mark {
    place-items: center;
    width: 34px;
    height: 34px;
    display: grid;
    position: relative
}

.brand-mark i {
    border-top: 5px solid;
    border-left: 5px solid;
    border-radius: 1px;
    width: 20px;
    height: 8px;
    position: absolute;
    transform: rotate(45deg)
}

.brand-mark i:last-child {
    opacity: .65;
    transform: translateY(7px)rotate(45deg)
}

.brand strong {
    letter-spacing: .06em;
    font-size: 14px;
    display: block
}

.brand small {
    letter-spacing: .16em;
    opacity: .56;
    margin-top: 2px;
    font-size: 6px;
    display: block
}

.site-header nav {
    gap: 34px;
    margin-left: auto;
    margin-right: 40px;
    display: flex
}

.site-header nav a {
    color: #ffffffb8;
    font-size: 12px;
    transition: all .2s
}

.nav-cta {
    color: #0e4fc5;
    background: #fff;
    border-radius: 2px;
    align-items: center;
    gap: 18px;
    height: 40px;
    padding: 0 19px;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex
}

.hero {
    color: #fff;
    background: radial-gradient(circle at 74% 40%, #1670f4 0, #0d55cd 22%, #063a99 48%, #051d53 85%);
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 30px;
    min-height: 810px;
    padding: 150px max(40px, 50vw - 715px) 78px;
    display: grid;
    position: relative
}

.hero:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(118deg, #03143da8, #0000 58%);
    position: absolute;
    inset: 0
}

.hero-grid {
    opacity: .19;
    background-image: linear-gradient(#ffffff29 1px, #0000 1px), linear-gradient(90deg, #ffffff29 1px, #0000 1px);
    background-size: 72px 72px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #000, #0000 75%);
    mask-image: linear-gradient(90deg, #000, #0000 75%)
}

.hero-copy {
    z-index: 2;
    max-width: 610px;
    position: relative
}

.eyebrow {
    color: #42688f;
    letter-spacing: .2em;
    margin: 0;
    font-size: 10px;
    font-weight: 800
}

.eyebrow.light {
    color: #9cc9ff
}

.eyebrow.cyan {
    color: var(--cyan)
}

.hero h1 {
    letter-spacing: -.075em;
    margin: 30px 0 18px;
    font-size: clamp(54px, 6.2vw, 88px);
    font-weight: 760;
    line-height: 1.01
}

.hero-slogan {
    letter-spacing: -.03em;
    color: #70ddff;
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 600
}

.hero-actions {
    gap: 11px;
    display: flex
}

.button {
    border: 1px solid #0000;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    gap: 28px;
    min-height: 50px;
    padding: 0 23px;
    font-size: 12px;
    font-weight: 800;
    transition: all .2s;
    display: inline-flex
}

.button:hover {
    transform: translateY(-2px)
}

.button-light {
    color: #0b4ec5;
    background: #fff
}

.button-ghost {
    color: #fff;
    border-color: #ffffff59
}

.hero-proof {
    color: #ffffffa8;
    gap: 22px;
    margin-top: 36px;
    font-size: 10px;
    display: flex
}

.hero-proof span:before {
    content: "";
    background: #56e8ff;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    margin-right: 8px;
    display: inline-block;
    box-shadow: 0 0 10px #56e8ff
}

.hero-products {
    z-index: 2;
    height: 580px;
    position: relative
}

.hero-device {
    object-fit: contain;
    filter: drop-shadow(30px 42px 34px #010c2561);
    animation: 6s ease-in-out infinite float;
    position: absolute
}

.hero-workstation {
    z-index: 4;
    width: 34%;
    height: 54%;
    bottom: 4%;
    right: 4%
}

.orbit {
    border: 1px solid #76daff47;
    border-radius: 50%;
    position: absolute;
    top: 48%;
    left: 51%;
    transform: translate(-50%, -50%)
}

.orbit-one {
    width: 520px;
    height: 520px
}

.orbit-two {
    border-style: dashed;
    width: 340px;
    height: 340px
}

.float-card {
    z-index: 5;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #021a4b8a;
    border: 1px solid #a3e1ff54;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    display: flex;
    position: absolute;
    top: 10%;
    right: 2%
}

.float-card b {
    color: #66e1ff;
    font-size: 30px
}

.float-card span {
    font-size: 10px;
    line-height: 1.45
}

.float-card small {
    color: #8fb9e7
}

.hero-caption {
    letter-spacing: .23em;
    color: #8cc5ff;
    transform-origin: 0 0;
    font-size: 8px;
    position: absolute;
    top: 14%;
    left: 6%;
    transform: rotate(-90deg)
}

.hero-caption i {
    vertical-align: middle;
    background: #67dfff;
    width: 60px;
    height: 1px;
    margin-left: 10px;
    display: inline-block
}

@keyframes float {
    50% {
        transform: translateY(-9px)
    }
}

.signal-strip {
    background: #eaf6ff;
    border-bottom: 1px solid #d1e3f3;
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: center;
    min-height: 102px;
    padding: 0 max(40px, 50vw - 715px);
    display: grid
}

.signal-strip div {
    border-right: 1px solid #c9dcec;
    align-items: center;
    gap: 14px;
    margin-right: 34px;
    padding-right: 34px;
    display: flex
}

.signal-strip strong {
    color: #1c6ee8;
    font-size: 10px
}

.signal-strip span {
    font-size: 12px;
    font-weight: 700
}

.signal-strip p {
    letter-spacing: .18em;
    color: #6d8ca9;
    font-size: 8px
}

.section {
    width: min(var(--content-width), calc(100% - 80px));
    margin: 0 auto;
    padding: 118px 0
}

.section-heading h2,
.solution-top h2 {
    letter-spacing: -.055em;
    margin: 18px 0 0;
    font-size: clamp(39px, 4vw, 58px);
    line-height: 1.17
}

.section-heading>p,
.split-heading>p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9
}

.split-heading {
    grid-template-columns: 1.2fr .7fr;
    align-items: end;
    gap: 100px;
    display: grid
}

.split-heading>p {
    max-width: 430px;
    margin: 0 0 5px auto
}

.centered {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 52px
}

.centered>p:last-child {
    max-width: 600px;
    margin: 19px auto 0
}

.challenge {
    padding-top: 124px;
    padding-bottom: 130px
}

.pain-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 58px;
    display: grid
}

.pain-card {
    border-radius: 5px;
    min-height: 480px;
    padding: 0 30px 31px;
    position: relative;
    overflow: hidden
}

.pain-visual {
    border-bottom: 1px solid #0c1f371c;
    height: 270px;
    margin: 0 -30px 24px;
    position: relative;
    overflow: hidden
}

.pain-visual:after {
    content: "";
    background-image: linear-gradient(#0b223d0f 1px, #0000 1px), linear-gradient(90deg, #0b223d0f 1px, #0000 1px);
    background-size: 28px 28px;
    position: absolute;
    inset: 0
}

.card-index {
    letter-spacing: .18em;
    color: #697688;
    font-size: 8px
}

.pain-card h3 {
    letter-spacing: -.03em;
    margin: 14px 0 9px;
    font-size: 27px
}

.pain-card>p {
    color: #576477;
    margin: 0;
    font-size: 13px;
    line-height: 1.75
}

.boundary-doc {
    z-index: 2;
    background: #fff;
    border: 1px solid #0c1f373d;
    width: 104px;
    height: 132px;
    padding: 33px 18px;
    position: absolute;
    top: 54px;
    left: 53px;
    transform: rotate(-4deg);
    box-shadow: 12px 16px #0e264514
}

.boundary-doc:before {
    content: "DOC";
    font-size: 8px;
    font-weight: 800;
    position: absolute;
    top: 12px;
    left: 16px
}

.boundary-doc i {
    background: #bec7d1;
    height: 4px;
    margin: 9px 0;
    display: block
}

.boundary-path {
    z-index: 2;
    border-top: 2px dashed #e4574f;
    width: 110px;
    position: absolute;
    top: 120px;
    left: 165px
}

.boundary-path b {
    background: #e4574f;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    top: -5px
}

.boundary-path b:nth-child(2) {
    left: 50%
}

.boundary-path b:last-child {
    right: 0
}

.boundary-cloud {
    z-index: 2;
    background: #132e4a;
    border-radius: 40px;
    width: 87px;
    height: 62px;
    position: absolute;
    top: 79px;
    right: 45px;
    box-shadow: -24px 15px 0 -7px #132e4a, 22px 15px 0 -6px #132e4a
}

.boundary-cloud span {
    z-index: 2;
    color: #fff;
    font-size: 19px;
    position: absolute;
    top: 20px;
    left: 37px
}

.boundary-alert {
    z-index: 3;
    color: #fff;
    background: #e4574f;
    border-radius: 50%;
    place-items: center;
    width: 36px;
    height: 36px;
    font-weight: 900;
    display: grid;
    position: absolute;
    bottom: 38px;
    right: 31px
}

.token-ring {
    z-index: 2;
    background: conic-gradient(#d48f15 0 78%, #52442824 78%);
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 156px;
    height: 156px;
    display: flex;
    position: absolute;
    top: 48px;
    left: 40px;
    box-shadow: inset 0 0 0 21px #efe5ca
}

.token-ring:before {
    content: "";
    background: #f8f1df;
    border-radius: 50%;
    position: absolute;
    inset: 23px
}

.token-ring strong,
.token-ring small {
    z-index: 2
}

.token-ring strong {
    font-size: 30px
}

.token-ring small {
    color: #78663d;
    font-size: 8px
}

.token-bars {
    z-index: 2;
    align-items: flex-end;
    gap: 7px;
    height: 142px;
    display: flex;
    position: absolute;
    bottom: 48px;
    right: 42px
}

.token-bars i {
    background: #173653;
    width: 14px
}

.token-bars i:first-child {
    height: 34%
}

.token-bars i:nth-child(2) {
    height: 52%
}

.token-bars i:nth-child(3) {
    height: 68%
}

.token-bars i:nth-child(4) {
    height: 81%
}

.token-bars i:nth-child(5) {
    background: #d48f15;
    height: 100%
}

.token-chip {
    z-index: 3;
    color: #fff;
    letter-spacing: .15em;
    background: #173653;
    padding: 7px 9px;
    font-size: 7px;
    position: absolute;
    top: 48px;
    right: 32px
}

.agent-node {
    z-index: 3;
    color: #0d493b;
    background: #fff;
    border: 1px solid #7aa99b;
    border-radius: 50%;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 10px;
    font-weight: 900;
    display: grid;
    position: absolute;
    box-shadow: 0 8px 18px #12453a1f
}

.agent-node.core {
    color: #fff;
    background: #123e35;
    width: 82px;
    height: 82px;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.agent-node.n1 {
    top: 45px;
    left: 48px
}

.agent-node.n2 {
    top: 55px;
    right: 45px
}

.agent-node.n3 {
    bottom: 29px;
    right: 73px
}

.agent-line {
    z-index: 1;
    transform-origin: 0;
    background: #72a99a;
    height: 1px;
    position: absolute
}

.agent-line.l1 {
    width: 90px;
    top: 87px;
    left: 89px;
    transform: rotate(19deg)
}

.agent-line.l2 {
    width: 84px;
    top: 113px;
    left: 218px;
    transform: rotate(-25deg)
}

.agent-line.l3 {
    width: 76px;
    top: 153px;
    left: 219px;
    transform: rotate(36deg)
}

.agent-lock {
    z-index: 4;
    color: #fff;
    background: #2cb788;
    border-radius: 50%;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 22px;
    display: grid;
    position: absolute;
    bottom: 28px;
    left: 55%
}

.solution {
    color: #fff;
    background: radial-gradient(circle at 15% 10%, #103f73 0, transparent 35%), radial-gradient(circle at 90% 80%, #073c62 0, transparent 35%), var(--navy);
    padding: 124px max(40px, 50vw - 715px) 132px;
    position: relative
}

.solution-noise {
    opacity: .18;
    background-image: linear-gradient(#74caff24 1px, #0000 1px), linear-gradient(90deg, #74caff24 1px, #0000 1px);
    background-size: 58px 58px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(circle, #000, #0000 75%);
    mask-image: radial-gradient(circle, #000, #0000 75%)
}

.solution-top,
.solution-stage {
    z-index: 2;
    position: relative
}

.solution-top {
    grid-template-columns: 1.1fr .65fr;
    align-items: end;
    gap: 90px;
    display: grid
}

.solution-top>p {
    color: #9eb1c8;
    margin: 0;
    font-size: 14px;
    line-height: 1.9
}

.solution-stage {
    grid-template-columns: 1.35fr .65fr;
    gap: 18px;
    margin-top: 58px;
    display: grid
}

.solution-console {
    background: #04152a9e;
    border: 1px solid #6bcbff40;
    box-shadow: 0 30px 80px #0000004d
}

.console-head {
    letter-spacing: .17em;
    color: #89a9c3;
    border-bottom: 1px solid #6bcbff33;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 48px;
    padding: 0 17px;
    font-size: 7px;
    display: grid
}

.console-head span {
    gap: 5px;
    display: flex
}

.console-head i {
    background: #4ccff7;
    border-radius: 50%;
    width: 5px;
    height: 5px
}

.console-head em {
    color: #42e4ac;
    justify-self: end;
    font-style: normal
}

.console-flow {
    grid-template-columns: 1fr .52fr 1fr .52fr 1fr;
    align-items: center;
    min-height: 328px;
    padding: 35px 25px;
    display: grid
}

.flow-column {
    background: #1943687a;
    border: 1px solid #6fbef02e;
    flex-direction: column;
    gap: 9px;
    min-height: 235px;
    padding: 22px 18px;
    display: flex
}

.flow-column small {
    color: #68cfff;
    letter-spacing: .2em;
    font-size: 7px
}

.flow-column b {
    margin: 5px 0 11px;
    font-size: 13px
}

.flow-column span {
    color: #a9bfd1;
    background: #02122480;
    padding: 8px 9px;
    font-size: 9px
}

.flow-arrow {
    background: #36c8f5;
    height: 1px;
    position: relative
}

.flow-arrow i {
    background: #65e4ff;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    animation: 2.2s linear infinite travel;
    position: absolute;
    top: -2px
}

.flow-arrow i:nth-child(2) {
    animation-delay: -.7s
}

.flow-arrow i:nth-child(3) {
    animation-delay: -1.4s
}

.flow-arrow strong {
    white-space: nowrap;
    color: #6e99b8;
    font-size: 7px;
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translate(-50%)
}

@keyframes travel {
    0% {
        left: 0
    }

    to {
        left: 100%
    }
}

.console-stats {
    border-top: 1px solid #6bcbff33;
    grid-template-columns: repeat(3, 1fr);
    display: grid
}

.console-stats span {
    color: #7593ac;
    border-right: 1px solid #6bcbff26;
    padding: 15px 18px;
    font-size: 8px
}

.console-stats b {
    color: #fff;
    margin-bottom: 4px;
    font-size: 16px;
    display: block
}

.capability-list {
    background: #5cadde2e;
    border: 1px solid #6bcbff2b;
    gap: 1px;
    display: grid
}

.capability-list article {
    background: #071e37eb;
    align-items: flex-start;
    gap: 18px;
    padding: 21px;
    display: flex
}

.capability-list article>span {
    color: #3ccff9;
    font-size: 9px
}

.capability-list h3 {
    margin: 0 0 6px;
    font-size: 16px
}

.capability-list p {
    color: #8ea6ba;
    margin: 0;
    font-size: 10px;
    line-height: 1.6
}

.editions {
    width: min(var(--content-width), calc(100% - 80px));
    background: #fff
}

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

.edition-card {
    min-height: 560px;
    padding: 48px;
    position: relative;
    overflow: hidden
}

.edition-number {
    color: #0c213a14;
    letter-spacing: -.08em;
    font-size: 120px;
    font-weight: 800;
    position: absolute;
    top: 25px;
    right: 35px
}

.edition-label {
    letter-spacing: .22em;
    color: #396690;
    font-size: 9px;
    font-weight: 900
}

.edition-card h3 {
    letter-spacing: -.06em;
    margin: 80px 0 21px;
    font-size: 49px;
    line-height: 1.05;
    position: relative
}

.edition-card>p {
    color: #617084;
    max-width: 470px;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    position: relative
}

.edition-card ul {
    margin: 30px 0 40px;
    padding: 0;
    list-style: none;
    position: relative
}

.edition-card li {
    color: #3f5269;
    margin: 12px 0;
    font-size: 12px
}

.edition-card li:before {
    content: "✓";
    color: #1471ee;
    margin-right: 11px;
    font-weight: 900
}

.edition-card>a {
    color: #145fc9;
    font-size: 11px;
    font-weight: 800;
    position: absolute;
    bottom: 45px;
    left: 48px
}

.edition-card>a span {
    margin-left: 18px
}

.edition-orbit {
    border: 1px solid #165dbd2e;
    border-radius: 50%;
    width: 330px;
    height: 330px;
    position: absolute;
    top: 44px;
    right: -75px
}

.edition-orbit i {
    border: 1px solid #165dbd2e;
    border-radius: 50%;
    position: absolute;
    inset: 48px
}

.edition-orbit i:nth-child(2) {
    inset: 96px
}

.edition-orbit i:nth-child(3) {
    background: #2373e6;
    inset: 143px;
    box-shadow: 0 0 30px #2373e666
}

.products {
    color: #fff;
    background: #113f8f;
    padding: 120px 40px
}

.products-inner {
    width: min(var(--content-width), 100%);
    margin: auto
}

.light-heading>p {
    color: #b6c9e3
}

.product-tabs {
    border-top: 1px solid #ffffff40;
    border-bottom: 1px solid #ffffff40;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 58px;
    display: grid
}

.product-tabs button {
    text-align: left;
    cursor: pointer;
    opacity: .55;
    background: 0 0;
    border: 0;
    border-right: 1px solid #ffffff2e;
    min-height: 112px;
    padding: 22px 26px;
    transition: all .25s;
    position: relative
}

.product-tabs button:last-child {
    border-right: 0
}

.product-tabs button:after {
    content: "";
    background: #55dcff;
    height: 3px;
    transition: all .3s;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 100%
}

.product-tabs button.active {
    opacity: 1;
    background: #ffffff12
}

.product-tabs button.active:after {
    right: 0
}

.product-tabs small {
    color: #6bceff;
    font-size: 8px;
    display: block
}

.product-tabs strong {
    margin: 7px 0 4px;
    font-size: 20px;
    display: block
}

.product-tabs span {
    color: #bad0e9;
    font-size: 9px
}

.product-detail {
    min-height: 570px;
    color: var(--ink);
    background: #f5f7fa;
    grid-template-columns: 1.15fr .85fr;
    display: grid
}

.product-image-wrap {
    background: linear-gradient(145deg, #edf4fa, #dce8f2);
    place-items: center;
    min-height: 570px;
    display: grid;
    position: relative;
    overflow: hidden
}

.product-image-wrap:before {
    content: "";
    background-image: linear-gradient(#164c8414 1px, #0000 1px), linear-gradient(90deg, #164c8414 1px, #0000 1px);
    background-size: 38px 38px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(circle, #000, #0000 72%);
    mask-image: radial-gradient(circle, #000, #0000 72%)
}

.product-image-wrap img {
    z-index: 3;
    object-fit: contain;
    filter: drop-shadow(25px 30px 24px #09213e45);
    width: 79%;
    height: 430px;
    animation: .45s both reveal;
    position: relative
}

.product-detail.server .product-image-wrap img {
    width: 88%
}

@keyframes reveal {
    0% {
        opacity: 0;
        transform: translateY(14px)scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.product-radar,
.product-radar i {
    border: 1px solid #1560af24;
    border-radius: 50%;
    position: absolute
}

.product-radar {
    width: 440px;
    height: 440px
}

.product-radar i {
    inset: 55px
}

.product-radar i:nth-child(2) {
    inset: 110px
}

.product-radar i:nth-child(3) {
    inset: 165px
}

.product-axis {
    z-index: 3;
    letter-spacing: .18em;
    color: #47729f;
    font-size: 7px;
    position: absolute
}

.axis-x {
    bottom: 20px;
    left: 24px
}

.axis-y {
    writing-mode: vertical-rl;
    top: 24px;
    right: 18px
}

.product-copy h3 {
    letter-spacing: -.04em;
    margin: 25px 0 7px;
    font-size: 34px
}

.product-copy h4 {
    color: #1768db;
    margin: 0 0 21px;
    font-size: 19px
}

.product-copy>p:not(.eyebrow) {
    color: #647186;
    margin: 0;
    font-size: 13px;
    line-height: 1.8
}

.product-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin: 29px 0;
    display: grid
}

.product-meta div {
    background: #e9eef4;
    padding: 15px
}

.product-meta span {
    color: #8795a6;
    font-size: 8px;
    display: block
}

.product-meta strong {
    margin-top: 7px;
    font-size: 10px;
    display: block
}

.product-copy ul {
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 35px;
    padding: 0;
    list-style: none;
    display: flex
}

.product-copy li {
    color: #54677b;
    border: 1px solid #ced8e3;
    padding: 7px 10px;
    font-size: 9px
}

.text-link {
    color: #1463cf;
    font-size: 11px;
    font-weight: 800
}

.text-link span {
    margin-left: 17px
}

.series-note {
    text-align: center;
    color: #a6bfdd;
    margin: 18px 0 0;
}

.experience {
    padding-top: 125px
}

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

.experience-card {
    border: 1px solid var(--line);
    background: #fff
}

.experience-screen {
    background: #eaf0f5;
    place-items: center;
    height: 330px;
    display: grid;
    position: relative;
    overflow: hidden
}

.experience-screen:before {
    content: "";
    background-image: linear-gradient(#1e558914 1px, #0000 1px), linear-gradient(90deg, #1e558914 1px, #0000 1px);
    background-size: 32px 32px;
    position: absolute;
    inset: 0
}

.premium-screen:before {
    background-image: linear-gradient(#66d2ff17 1px, #0000 1px), linear-gradient(90deg, #66d2ff17 1px, #0000 1px)
}

.screen-label {
    z-index: 2;
    color: #2063a8;
    letter-spacing: .18em;
    background: #fff;
    padding: 7px 9px;
    font-size: 7px;
    position: absolute;
    top: 20px;
    left: 22px
}

.task-flow {
    z-index: 2;
    align-items: center;
    gap: 9px;
    display: flex;
    position: relative
}

.task-flow b {
    background: #fff;
    border: 1px solid #b9c9d8;
    padding: 17px 15px;
    font-size: 9px;
    box-shadow: 0 12px 22px #17426c14
}

.task-flow i {
    color: #fff;
    background: #216bd0;
    border-radius: 50%;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 7px;
    font-style: normal;
    display: grid
}

.screen-wave {
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    height: 44px;
    display: flex;
    position: absolute;
    bottom: 21px;
    left: 0;
    right: 0
}

.screen-wave i {
    background: #2b78d9;
    width: 4px
}

.screen-wave i:first-child,
.screen-wave i:nth-child(7) {
    height: 12px
}

.screen-wave i:nth-child(2),
.screen-wave i:nth-child(6) {
    height: 24px
}

.screen-wave i:nth-child(3),
.screen-wave i:nth-child(5) {
    height: 36px
}

.screen-wave i:nth-child(4) {
    height: 18px
}

.agent-window {
    z-index: 2;
    background: #061d42;
    border: 1px solid #7ed2ff73;
    width: 310px;
    position: relative;
    box-shadow: 0 24px 45px #0000004d
}

.agent-window>div {
    border-bottom: 1px solid #7ed2ff33;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 12px;
    display: flex
}

.agent-window>div i {
    background: #4cd7ff;
    border-radius: 50%;
    width: 5px;
    height: 5px
}

.agent-window section {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 24px;
    display: grid
}

.agent-window section b {
    color: #c3ebff;
    background: linear-gradient(145deg, #0e64bf, #123769);
    border: 1px solid #7ed2ff40;
    place-items: center;
    height: 62px;
    font-size: 10px;
    display: grid
}

.agent-window footer {
    color: #70a8cb;
    border-top: 1px solid #7ed2ff33;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 7px;
    display: flex
}

.agent-window em {
    color: #4fe2ae;
    font-style: normal
}

.experience-copy>span {
    letter-spacing: .15em;
    color: #467bad;
    font-size: 8px
}

.experience-copy h3 {
    max-width: 470px;
    margin: 13px 0 11px;
    font-size: 22px;
    line-height: 1.35
}

.experience-copy p {
    color: #69778a;
    margin: 0 0 25px;
    font-size: 12px;
    line-height: 1.75
}

.experience-copy a {
    color: #1463cf;
    font-size: 10px;
    font-weight: 800
}

.experience-copy a span {
    margin-left: 15px
}

.guide {
    background: #dff0e6;
    grid-template-columns: 1.1fr .9fr;
    min-height: 540px;
    display: grid
}

.guide-steps {
    background: linear-gradient(145deg, #cae7d7, #e8f5ed);
    justify-content: center;
    align-items: center;
    padding: 60px;
    display: flex
}

.guide-steps>span {
    background: #fff;
    border: 1px solid #a8c9b5;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 88px;
    height: 88px;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    box-shadow: 0 10px 24px #1e4f3212
}

.guide-steps small {
    color: #607667;
    font-size: 8px;
    font-weight: 500
}

.guide-steps>i {
    border-top: 1px dashed #71977f;
    width: 32px
}

.guide-copy {
    background: #eaf5ee;
    padding: 96px 10vw 80px 75px
}

.guide-copy h2 {
    letter-spacing: -.05em;
    margin: 19px 0;
    font-size: 45px;
    line-height: 1.17
}

.guide-copy>p:not(.eyebrow) {
    color: #62776a;
    max-width: 480px;
    font-size: 13px;
    line-height: 1.8
}

.button-dark {
    color: #fff;
    background: #123e35;
    margin-top: 19px
}

.consult {
    color: #fff;
    background: #071d39;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 90px;
    padding: 120px max(40px, 50vw - 715px);
    display: grid
}

.consult-copy h2 {
    letter-spacing: -.055em;
    margin: 22px 0;
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.14
}

.consult-copy>p:not(.eyebrow) {
    color: #96aac0;
    max-width: 510px;
    font-size: 13px;
    line-height: 1.8
}

.consult-tags {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
    display: flex
}

.consult-tags span {
    color: #9cc7df;
    border: 1px solid #77c3ef38;
    padding: 8px 10px;
    font-size: 12px
}

.form-shell {
    min-height: 560px;
    color: var(--ink);
    background: #fff;
    padding: 42px
}

.form-title {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 27px;
    display: flex
}

.form-title strong {
    font-size: 20px
}

.form-title small {
    color: #8a96a5;
    font-size: 8px
}

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

form label {
    color: #536175;
    margin-bottom: 14px;
    font-size: 9px;
    font-weight: 700;
    display: block
}

form input,
form select,
form textarea {
    color: #172942;
    background: #f8fafc;
    border: 1px solid #d8e0e8;
    border-radius: 0;
    outline: none;
    width: 100%;
    margin-top: 8px;
    padding: 12px 13px;
    font-size: 11px
}

form input:focus,
form select:focus,
form textarea:focus {
    background: #fff;
    border-color: #2372e6
}

.consent {
    align-items: flex-start;
    gap: 8px;
    font-weight: 400 !important;
    display: flex !important
}

.consent input {
    width: 13px;
    margin: 1px 0 0
}

.submit-button {
    color: #fff;
    cursor: pointer;
    background: #1367dc;
    border: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 49px;
    padding: 0 19px;
    font-size: 11px;
    font-weight: 800;
    display: flex
}

.success-state {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 475px;
    display: flex
}

.success-state>div {
    color: #178452;
    background: #e2f5eb;
    border-radius: 50%;
    place-items: center;
    width: 56px;
    height: 56px;
    font-size: 24px;
    display: grid
}

.success-state h3 {
    margin: 20px 0 8px;
    font-size: 24px
}

.success-state p {
    color: #728094;
    font-size: 12px
}

.success-state button {
    cursor: pointer;
    background: #fff;
    border: 1px solid #cad5e0;
    margin-top: 16px;
    padding: 11px 20px;
    font-size: 10px
}

.footer {
    color: #fff;
    background: #041427;
    border-top: 1px solid #ffffff1a;
    align-items: center;
    min-height: 96px;
    padding: 0 max(40px, 50vw - 715px);
    display: flex
}

.footer p {
    color: #758ba2;
    margin: auto;
    font-size: 9px
}

.footer>a:last-child {
    color: #9ab3c9;
    font-size: 9px
}

.floating-consult {
    z-index: 20;
    color: #0c55c5;
    background: #fff;
    gap: 15px;
    padding: 13px 16px;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    position: fixed;
    bottom: 22px;
    right: 22px;
    box-shadow: 0 12px 30px #071f413d
}

@media (width<=980px) {
    .site-header {
        width: calc(100% - 40px)
    }

    .site-header nav {
        display: none
    }

    .hero {
        grid-template-columns: 1fr;
        padding: 135px 28px 45px
    }

    .hero-products {
        height: 470px
    }

    .signal-strip {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        padding: 25px 28px
    }

    .signal-strip div {
        border: 0;
        margin: 0;
        padding: 0
    }

    .signal-strip p {
        display: none
    }

    .section {
        width: calc(100% - 48px);
        padding: 85px 0
    }

    .split-heading,
    .solution-top {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .split-heading>p {
        margin: 0
    }

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

    .pain-card {
        min-height: 450px
    }

    .solution {
        padding: 85px 24px
    }

    .solution-stage {
        grid-template-columns: 1fr
    }

    .edition-card {
        padding: 36px
    }

    .products {
        padding: 85px 24px
    }

    .product-detail {
        grid-template-columns: 1fr
    }

    .product-copy {
        padding: 42px
    }

    .experience-grid,
    .guide {
        grid-template-columns: 1fr
    }

    .guide-copy {
        padding: 70px 35px
    }

    .consult {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 85px 24px
    }
}

@media (width<=620px) {
    .site-header {
        height: 70px
    }

    .nav-cta {
        height: 36px;
        padding: 0 12px
    }

    .hero {
        min-height: 790px
    }

    .hero h1 {
        font-size: 49px
    }

    .hero-products {
        height: 370px
    }

    .hero-supernode {
        width: 47%;
        left: 25%
    }

    .hero-server {
        width: 56%;
        left: -7%
    }

    .hero-workstation {
        width: 39%
    }

    .orbit-one {
        width: 330px;
        height: 330px
    }

    .orbit-two {
        width: 230px;
        height: 230px
    }

    .float-card {
        top: 5%;
        right: 0
    }

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

    .section-heading h2,
    .solution-top h2 {
        font-size: 35px
    }

    .pain-grid {
        margin-top: 38px
    }

    .solution-stage {
        overflow: hidden
    }

    .console-flow {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px
    }

    .flow-column {
        min-height: auto
    }

    .flow-arrow {
        width: 1px;
        height: 30px;
        margin: auto
    }

    .flow-arrow i {
        display: none
    }

    .flow-arrow strong {
        top: 8px;
        left: 12px;
        transform: none
    }

    .console-stats,
    .edition-grid {
        grid-template-columns: 1fr
    }

    .edition-card {
        min-height: 520px
    }

    .edition-card h3 {
        font-size: 39px
    }

    .product-tabs button {
        min-height: 94px;
        padding: 15px 10px
    }

    .product-tabs button span {
        display: none
    }

    .product-detail {
        min-height: auto
    }

    .product-image-wrap {
        min-height: 400px
    }

    .product-image-wrap img {
        height: 330px
    }

    .product-copy {
        padding: 35px 25px
    }

    .product-copy h3 {
        font-size: 28px
    }

    .guide-steps {
        padding: 45px 15px
    }

    .guide-steps>span {
        width: 56px;
        height: 56px
    }

    .guide-steps>i {
        width: 9px
    }

    .guide-copy h2,
    .consult-copy h2 {
        font-size: 37px
    }

    .form-shell {
        padding: 26px
    }

    .field-row {
        grid-template-columns: 1fr
    }

    .footer {
        gap: 20px;
        padding: 25px
    }

    .footer p {
        display: none
    }

    .floating-consult {
        bottom: 12px;
        right: 12px
    }
}

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

@media (width>=981px) {
    .site-header {
        width: min(var(--content-width), calc(100% - 80px))
    }

    .hero,
    .signal-strip,
    .solution,
    .consult {
        padding-left: max(40px, 50vw - 760px);
        padding-right: max(40px, 50vw - 760px)
    }

    .section,
    .editions {
        width: min(var(--content-width), calc(100% - 80px))
    }

    .products-inner {
        width: min(var(--content-width), 100%)
    }

    .footer {
        padding-left: max(40px, 50vw - 760px);
        padding-right: max(40px, 50vw - 760px)
    }
}

.experience .section-heading {
    margin-bottom: 42px
}

.experience-card {
    transition: transform .3s, box-shadow .3s
}

.experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 68px #2a5b4626
}

.experience-screen.video-cover {
    aspect-ratio: 16/9;
    cursor: pointer;
    text-align: left;
    background: #ddecf8;
    border: 0;
    width: 100%;
    height: auto;
    padding: 0;
    display: block;
    overflow: hidden
}

.experience-screen.video-cover:before {
    display: none
}

.video-cover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .55s, filter .4s;
    display: block
}

.video-cover:hover img {
    filter: saturate(1.05)contrast(1.02);
    transform: scale(1.025)
}

.video-shade {
    background: linear-gradient(#061f4405 40%, #031f4847);
    transition: background .3s;
    position: absolute;
    inset: 0
}

.video-cover:hover .video-shade {
    background: linear-gradient(#061f440d 30%, #031f4857)
}

.play-button {
    z-index: 3;
    background: linear-gradient(145deg, #1389eff2, #0359d3f5);
    border: 1px solid #ffffffeb;
    border-radius: 50%;
    place-items: center;
    width: 78px;
    height: 78px;
    transition: transform .28s, box-shadow .28s;
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 38px #0049ac4d, 0 0 0 10px #ffffff38
}

.play-button i {
    border-top: 10px solid #0000;
    border-bottom: 10px solid #0000;
    border-left: 16px solid #fff;
    width: 0;
    height: 0;
    margin-left: 5px
}

.video-cover:hover .play-button {
    transform: translate(-50%, -50%)scale(1.08);
    box-shadow: 0 20px 46px #0049ac5c, 0 0 0 13px #ffffff3d
}

.experience-copy {
    min-height: 190px
}

.experience-copy>span {
    color: #0870d7;
    letter-spacing: .12em;
    font-size: 10px;
    font-weight: 800
}

.experience-copy h3 {
    white-space: nowrap;
    letter-spacing: -.035em;
    max-width: none;
    margin-top: 11px;
    font-size: clamp(12px, 1.52vw, 22px)
}

.video-modal {
    z-index: 1000;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #010c22c7;
    place-items: center;
    padding: 34px;
    animation: .22s video-fade;
    display: grid;
    position: fixed;
    inset: 0
}

.video-dialog {
    background: #061a38;
    border: 1px solid #8fd8ff61;
    border-radius: 18px;
    width: min(1180px, 94vw);
    animation: .28s video-rise;
    overflow: hidden;
    box-shadow: 0 36px 110px #0007188c
}

.video-dialog-head {
    color: #fff;
    background: linear-gradient(90deg, #092a58, #073b78);
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding: 0 18px 0 26px;
    display: flex
}

.video-dialog-head h3 {
    letter-spacing: -.015em;
    margin: 0;
    font-size: 17px;
    font-weight: 700
}

.video-dialog-head button {
    color: #dcecff;
    cursor: pointer;
    background: #ffffff17;
    border: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 28px;
    line-height: 1;
    transition: background .2s, transform .2s
}

.video-dialog-head button:hover {
    background: #ffffff29;
    transform: rotate(5deg)
}

.video-dialog video {
    aspect-ratio: 16/9;
    background: #000;
    width: 100%;
    max-height: calc(100vh - 150px);
    display: block
}

@keyframes video-fade {
    0% {
        opacity: 0
    }
}

@keyframes video-rise {
    0% {
        opacity: 0;
        transform: translateY(14px)scale(.985)
    }
}

@media (width<=620px) {
    .experience .section-heading {
        margin-bottom: 28px
    }

    .play-button {
        width: 62px;
        height: 62px
    }

    .play-button i {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 13px
    }

    .experience-copy {
        min-height: 0;
        padding-left: 20px;
        padding-right: 20px
    }

    .video-modal {
        padding: 12px
    }

    .video-dialog {
        border-radius: 12px;
        width: 100%
    }

    .video-dialog-head {
        height: 54px;
        padding-left: 16px
    }

    .video-dialog-head h3 {
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100% - 50px);
        font-size: 14px;
        overflow: hidden
    }
}

@media (width>=1280px) {
    .site-header {
        width: min(var(--content-width), 79.17vw)
    }

    .hero,
    .signal-strip,
    .solution,
    .consult {
        padding-left: calc((100vw - min(var(--content-width), 79.17vw))/2);
        padding-right: calc((100vw - min(var(--content-width), 79.17vw))/2)
    }

    .section,
    .editions,
    .products-inner {
        width: min(var(--content-width), 79.17vw)
    }

    .footer {
        padding-left: calc((100vw - min(var(--content-width), 79.17vw))/2);
        padding-right: calc((100vw - min(var(--content-width), 79.17vw))/2)
    }
}

.site-header {
    height: 76px;
    color: var(--ink);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #fffffff0;
    border-bottom: 1px solid #0a4a9d1f;
    padding: 0 22px;
    box-shadow: 0 5px 24px #143e710a
}

.brand-inspur {
    line-height: 0
}

.brand-logo {
    width: auto;
    height: 27px;
    display: block
}

.site-header nav a {
    color: #43566f
}

.site-header nav a:hover {
    color: #0068d7
}

.nav-cta {
    color: #fff;
    background: #0068d7
}

.hero {
    min-height: 740px;
    color: var(--ink);
    background: linear-gradient(112deg, #fff 0%, #f9fbfe 40%, #edf5fd 72%, #e2effb 100%);
    grid-template-columns: .92fr 1.08fr;
    gap: 24px;
    padding-top: 116px;
    padding-bottom: 50px
}

.hero:before {
    content: "";
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, #0000 0 42%, #0068d712 42% 49%, #0000 49% 60%, #0068d709 60% 66%, #0000 66%);
    width: 62%;
    height: 138%;
    position: absolute;
    top: -18%;
    right: -8%;
    transform: skew(-5deg)
}

.hero-grid {
    opacity: .48;
    background-image: linear-gradient(#1168c712 1px, #0000 1px), linear-gradient(90deg, #1168c712 1px, #0000 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(90deg, #0000 33%, #000 74%, #0000);
    mask-image: linear-gradient(90deg, #0000 33%, #000 74%, #0000)
}

.hero-copy {
    z-index: 3;
    max-width: none
}

.hero h1 {
    white-space: nowrap;
    color: #102846;
    letter-spacing: -.055em;
    margin: 0 0 22px;
    font-size: clamp(38px, 3.45vw, 66px);
    font-weight: 720;
    line-height: 1.08
}

.hero-slogan {
    color: #0068d7;
    letter-spacing: -.025em;
    font-size: clamp(23px, 1.7vw, 32px)
}

.hero-lead {
    color: #5c6f87;
    max-width: 590px;
    margin: 25px 0 0;
    font-size: 15px;
    line-height: 1.9
}

.hero-products {
    height: 570px
}

.hero-products:before {
    content: "";
    z-index: 0;
    filter: blur(8px);
    background: radial-gradient(#005dc238, #3b8be014 42%, #0000 71%);
    border-radius: 50%;
    height: 31%;
    position: absolute;
    bottom: 2%;
    left: 3%;
    right: -2%
}

.hero-products:after {
    content: "";
    z-index: 1;
    background: linear-gradient(90deg, #0000, #55a5ef 15%, #0068d7 50%, #55a5ef 84%, #0000);
    height: 1px;
    position: absolute;
    bottom: 10%;
    left: 2%;
    right: 1%;
    box-shadow: 0 0 20px #0068d78c
}

.hero-stage {
    z-index: 1;
    perspective: 600px;
    height: 35%;
    position: absolute;
    bottom: 4%;
    left: 5%;
    right: 2%
}

.hero-stage:before {
    content: "";
    transform-origin: bottom;
    background: linear-gradient(160deg, #ffffff57, #1c76d50b);
    border: 1px solid #0068d72b;
    position: absolute;
    inset: 22% 4% 2%;
    transform: rotateX(68deg)
}

.hero-stage i {
    background: linear-gradient(90deg, #0000, #0068d740, #0000);
    height: 1px;
    position: absolute;
    left: 8%;
    right: 8%
}

.hero-stage i:first-child {
    bottom: 24%
}

.hero-stage i:nth-child(2) {
    bottom: 42%
}

.hero-stage i:last-child {
    bottom: 60%
}

.hero-device {
    filter: drop-shadow(24px 34px 24px #12355e4d);
    animation: 7s ease-in-out infinite hero-float
}

.hero-supernode {
    z-index: 2;
    width: 43%;
    height: 80%;
    animation-delay: -2.4s;
    bottom: 8%;
    left: 30%
}

.hero-server {
    z-index: 3;
    width: 64%;
    height: 40%;
    animation-delay: -4.6s;
    bottom: 5%;
    left: -2%
}

.hero-workstation {
    z-index: 4;
    width: 34%;
    height: 57%;
    animation-delay: -.8s;
    bottom: 6%;
    right: -1%
}

@keyframes hero-float {
    50% {
        transform: translateY(-7px)
    }
}

@media (width<=1279px) and (width>=981px) {
    .hero h1 {
        font-size: clamp(37px, 3.45vw, 48px)
    }

    .hero-products {
        height: 500px
    }

    .hero-supernode {
        width: 46%;
        left: 27%
    }

    .hero-server {
        width: 66%
    }

    .hero-workstation {
        width: 36%
    }
}

@media (width<=980px) {
    .site-header {
        padding: 0 10px
    }

    .brand-logo {
        height: 24px
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: 900px;
        padding-top: 118px;
        padding-bottom: 34px
    }

    .hero-copy {
        align-self: end
    }

    .hero h1 {
        font-size: clamp(34px, 6vw, 46px)
    }

    .hero-products {
        height: 430px
    }

    .hero-supernode {
        width: 43%;
        left: 29%
    }

    .hero-server {
        width: 62%;
        left: 0
    }

    .hero-workstation {
        width: 34%;
        right: 0
    }
}

@media (width<=620px) {
    .site-header {
        height: 66px
    }

    .brand-logo {
        height: 20px
    }

    .hero {
        min-height: 760px;
        padding-top: 102px
    }

    .hero h1 {
        letter-spacing: -.06em;
        font-size: clamp(26px, 7.7vw, 32px)
    }

    .hero-slogan {
        font-size: 22px
    }

    .hero-lead {
        font-size: 13px;
        line-height: 1.75
    }

    .hero-products {
        height: 330px
    }

    .hero-supernode {
        width: 47%;
        height: 78%;
        left: 26%
    }

    .hero-server {
        width: 66%;
        height: 42%;
        left: -4%
    }

    .hero-workstation {
        width: 38%;
        height: 57%;
        right: -3%
    }
}

.hero {
    color: #fff;
    background-color: #031439;
    background-image: linear-gradient(90deg, #020f30e6 0%, #021740ad 39%, #001f532e 68%, #000f2e6b 100%), url(../hero-energy-bg.png);
    background-position: 50%;
    background-size: cover;
    min-height: 790px
}

.hero:before {
    background: radial-gradient(circle at 74% 52%, #20beff2e, #0000 34%), linear-gradient(115deg, #0000 0 56%, #229fff17 56% 57%, #0000 57% 66%, #229fff0f 66% 67%, #0000 67%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: auto;
    transform: none
}

.hero-grid {
    opacity: .25;
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(90deg, #000, #0000 40%, #000 75%, #0000);
    mask-image: linear-gradient(90deg, #000, #0000 40%, #000 75%, #0000)
}

.hero-copy {
    z-index: 4
}

.hero h1 {
    color: #fff;
    text-shadow: 0 6px 30px #00000038
}

.hero-products {
    z-index: 3;
    place-items: center;
    height: 620px;
    display: grid
}

.hero-products:before {
    filter: blur(14px);
    background: radial-gradient(#009aff59, #004ebe29 38%, #0000 70%);
    height: 45%;
    bottom: 4%;
    left: 5%;
    right: 0
}

.hero-products:after {
    background: linear-gradient(90deg, #0000, #43c7ff 18%, #e2f7ff 50%, #43c7ff 82%, #0000);
    bottom: 7%;
    left: 6%;
    right: 2%;
    box-shadow: 0 0 28px #37c8ffd9
}

.ai-architecture {
    filter: drop-shadow(0 28px 48px #00071c59);
    width: min(700px, 100%);
    height: 590px;
    position: relative
}

.ai-architecture:before {
    content: "";
    z-index: 0;
    background: radial-gradient(circle, #0c60c121, #0000 61%);
    border: 1px solid #6fdaff2b;
    border-radius: 50%;
    position: absolute;
    inset: 36px 8px 18px;
    box-shadow: inset 0 0 80px #32b0ff0f, 0 0 50px #1a8eff14
}

.ai-architecture:after {
    content: "";
    z-index: 0;
    border: 1px dashed #6fdaff47;
    border-radius: 50%;
    width: 410px;
    height: 410px;
    animation: 28s linear infinite architecture-spin;
    position: absolute;
    top: 95px;
    left: 50%;
    transform: translate(-50%)
}

@keyframes architecture-spin {
    to {
        transform: translate(-50%)rotate(360deg)
    }
}

.capability-layer {
    z-index: 5;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 430px;
    display: grid;
    position: absolute;
    top: 27px;
    left: 50%;
    transform: translate(-50%)
}

.capability-layer:before {
    content: "";
    z-index: -1;
    background: linear-gradient(90deg, #37cfff, #75dbff40, #37cfff);
    height: 1px;
    position: absolute;
    top: 50%;
    left: 16.5%;
    right: 16.5%;
    box-shadow: 0 0 12px #1aaef4
}

.capability-layer span {
    color: #eafaff;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    letter-spacing: .14em;
    background: linear-gradient(145deg, #1465bdd1, #032257e6);
    border: 1px solid #68d9ff94;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 58px;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    position: relative;
    box-shadow: inset 0 0 18px #2eb4ff1f
}

.capability-layer span:after {
    content: "";
    background: linear-gradient(#49d6ff, #0000);
    width: 1px;
    height: 52px;
    position: absolute;
    top: 100%;
    left: 50%;
    box-shadow: 0 0 10px #49d6ff
}

.capability-layer small {
    color: #7fdfff;
    letter-spacing: .18em;
    margin-top: 4px;
    font-size: 8px
}

.runtime-core {
    z-index: 6;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    background: linear-gradient(145deg, #0079e6eb, #032a71f5);
    border: 1px solid #76deff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 282px;
    height: 108px;
    display: flex;
    position: absolute;
    top: 138px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 34px #109eff7a, inset 0 0 28px #61d9ff33
}

.runtime-core:before,
.runtime-core:after {
    content: "";
    background: linear-gradient(90deg, #0000, #62d9ff);
    width: 92px;
    height: 1px;
    position: absolute;
    top: 50%
}

.runtime-core:before {
    right: 100%
}

.runtime-core:after {
    left: 100%;
    transform: scaleX(-1)
}

.runtime-core i {
    background: linear-gradient(90deg, #0000, #58e5ff, #0000);
    height: 2px;
    position: absolute;
    bottom: 9px;
    left: 15px;
    right: 15px;
    box-shadow: 0 0 10px #58e5ff
}

.machine-rail {
    z-index: 5;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 12px;
    height: 285px;
    display: grid;
    position: absolute;
    bottom: 12px;
    left: 10px;
    right: 10px
}

.machine-rail:before {
    content: "";
    z-index: -2;
    clip-path: polygon(4% 0, 96% 0, 100% 36%, 96% 100%, 4% 100%, 0 36%);
    background: linear-gradient(#136bc461, #011643cc);
    border: 1px solid #5ad1ff61;
    height: 94px;
    position: absolute;
    bottom: 8px;
    left: 1%;
    right: 1%;
    box-shadow: 0 16px 35px #00041873, inset 0 0 25px #209fff1f
}

.machine-rail:after {
    content: "";
    z-index: -1;
    background: linear-gradient(90deg, #0000, #5ce3ff 12% 88%, #0000);
    height: 1px;
    position: absolute;
    bottom: 84px;
    left: 4%;
    right: 4%;
    box-shadow: 0 0 18px #21b9ff
}

.machine-slot {
    place-items: center;
    height: 244px;
    margin: 0;
    display: grid;
    position: relative;
    overflow: visible
}

.machine-slot:before {
    content: "";
    z-index: -1;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
    background: linear-gradient(#2282dc1a, #031e513d);
    border: 1px solid #6bd7ff24;
    height: 150px;
    position: absolute;
    bottom: 40px;
    left: 10%;
    right: 10%
}

.machine-slot img {
    z-index: 2;
    object-fit: contain;
    filter: drop-shadow(16px 24px 18px #00051c85);
    width: 92%;
    height: 206px;
    animation: 6s ease-in-out infinite machine-hover;
    position: relative
}

.slot-server img {
    width: 98%;
    height: 203px;
    animation-delay: -4s
}

@keyframes machine-hover {
    50% {
        transform: translateY(-5px)
    }
}

@media (width<=1279px) and (width>=981px) {
    .ai-architecture {
        transform-origin: 50%;
        transform: scale(.86)
    }

    .hero-products {
        height: 550px
    }

    .capability-layer {
        width: 400px
    }
}

@media (width<=980px) {
    .hero {
        min-height: 1040px
    }

    .hero-products {
        height: 560px
    }

    .ai-architecture {
        transform-origin: 50%;
        transform: scale(.9)
    }

    .machine-rail {
        left: 20px;
        right: 20px
    }
}

@media (width<=620px) {
    .hero {
        min-height: 900px
    }

    .hero-products {
        height: 450px
    }

    .ai-architecture {
        transform-origin: 50%;
        width: 680px;
        transform: scale(.58)
    }

    .hero-products:before {
        height: 58%
    }
}

.hero {
    height: 750px;
    min-height: 750px;
    color: var(--ink);
    background-color: #eef7ff;
    background-image: radial-gradient(circle at 73% 44%, #2799f429, #0000 31%), linear-gradient(112deg, #fff 0%, #f8fbff 38%, #e9f5ff 74%, #f4f9ff 100%);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
    background-attachment: scroll;
    background-origin: padding-box;
    background-clip: border-box;
    grid-template-columns: .82fr 1.18fr;
    padding-top: 92px;
    padding-bottom: 18px;
    overflow: hidden
}

.hero:before {
    background-color: #0000;
    background-image: linear-gradient(#0065d20b 1px, #0000 1px), linear-gradient(90deg, #0065d20b 1px, #0000 1px);
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
    background-size: 64px 64px;
    background-attachment: scroll, scroll;
    background-origin: padding-box, padding-box;
    background-clip: border-box, border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    -webkit-mask-image: linear-gradient(90deg, #0000 22%, #000 68%, #0000);
    mask-image: linear-gradient(90deg, #0000 22%, #000 68%, #0000)
}

.hero-grid {
    display: none
}

.hero-copy {
    align-self: center
}

.hero-lead {
    color: #5e7087
}

.hero-products {
    align-self: end;
    place-items: center;
    height: 640px;
    display: grid
}

.hero-products:before,
.hero-products:after {
    display: none
}

.ai-architecture:before {
    z-index: 0;
    background: radial-gradient(circle, #2a9aef1f, #4ca0e809 54%, #0000 70%);
    border: 1px solid #2a89e333;
    border-radius: 50%;
    width: 430px;
    height: 430px;
    inset: 75px auto auto 50%;
    transform: translate(-50%);
    box-shadow: 0 0 60px #3897eb17
}

.ai-architecture:after {
    z-index: 0;
    background: #ffffff1f;
    border: 1px solid #2a89e330;
    border-radius: 50%;
    width: 314px;
    height: 314px;
    animation: none;
    top: 132px;
    left: 50%;
    transform: translate(-50%)
}

.capability-layer {
    z-index: 5;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 324px;
    display: grid;
    top: 18px;
    left: auto;
    right: 12px;
    transform: none
}

.capability-layer:before {
    display: none
}

.capability-layer span {
    color: #416b9c;
    clip-path: none;
    letter-spacing: .08em;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffffbf;
    border: 1px solid #3889d645;
    border-radius: 999px;
    min-height: 48px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 8px 22px #2b6bad0d
}

.capability-layer span:after,
.capability-layer small {
    display: none
}

.runtime-core {
    z-index: 4;
    clip-path: none;
    background: linear-gradient(145deg, #20a7eb, #086fe1 58%, #0951bf);
    border: 1px solid #ffffffbd;
    border-radius: 50%;
    width: 268px;
    height: 268px;
    top: 128px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 24px 55px #1068c340, 0 0 0 10px #298ee712, 0 0 0 25px #298ee709
}

.runtime-core:before,
.runtime-core:after {
    display: none
}

.runtime-core small {
    color: #cdeeff;
    letter-spacing: .18em;
    font-size: 12px
}

.runtime-core strong {
    color: #fff;
    letter-spacing: .02em;
    margin-top: 13px;
    font-size: 27px
}

.runtime-core em {
    color: #ffffffd1;
    letter-spacing: .1em;
    margin-top: 10px;
    font-size: 13px;
    font-style: normal
}

.runtime-core i {
    display: none
}

.machine-rail {
    z-index: 6;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 25px;
    height: 240px;
    display: grid;
    bottom: 0;
    left: 28px;
    right: 28px
}

.machine-rail:before {
    z-index: -1;
    clip-path: none;
    height: 1px;
    box-shadow: none;
    background: linear-gradient(90deg, #0000, #1970c947 12% 88%, #0000);
    border: 0;
    bottom: 32px;
    left: 3%;
    right: 3%
}

.machine-rail:after {
    display: none
}

.machine-slot {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 240px;
    margin: 0;
    display: flex;
    overflow: visible
}

.machine-slot img {
    object-fit: contain;
    filter: drop-shadow(10px 16px 13px #1937573d);
    width: 100%;
    height: 192px;
    animation: 7s ease-in-out infinite machine-hover
}

.slot-supernode img {
    width: 88%;
    height: 198px
}

.slot-server img {
    width: 100%;
    height: 174px;
    margin-bottom: 12px
}

.machine-slot figcaption {
    color: #6683a4;
    letter-spacing: .12em;
    height: 28px;
    margin-top: 6px;
    font-size: 11px
}

@media (width<=1279px) and (width>=981px) {
    .hero {
        height: 750px;
        min-height: 750px
    }

    .hero-products {
        height: 620px
    }

    .ai-architecture {
        transform-origin: 50%;
        transform: scale(.84)
    }

    .hero h1 {
        font-size: clamp(38px, 3.4vw, 48px)
    }
}

@media (width<=980px) {
    .hero {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 980px;
        padding-top: 108px;
        padding-bottom: 20px
    }

    .hero-products {
        height: 560px
    }

    .ai-architecture {
        transform-origin: 50%;
        transform: scale(.86)
    }

    .hero-copy {
        align-self: end
    }
}

@media (width<=620px) {
    .hero {
        min-height: 850px
    }

    .hero h1 {
        font-size: clamp(26px, 7.7vw, 32px)
    }

    .hero-products {
        height: 440px
    }

    .ai-architecture {
        transform-origin: 50%;
        width: 740px;
        transform: scale(.55)
    }

    .capability-layer {
        right: 80px
    }

    .machine-rail {
        left: 42px;
        right: 42px
    }
}

.hero {
    background: radial-gradient(circle at 75% 37%, #30d3ff6b, #0000 16%), radial-gradient(circle at 86% 15%, #539aff61, #0000 25%), linear-gradient(112deg, #f8fbff 0%, #eaf4ff 38%, #1677d3 38.1%, #0751aa 67%, #04357d 100%);
    grid-template-columns: .8fr 1.2fr;
    gap: 34px;
    height: 750px;
    min-height: 750px;
    padding-top: 24px;
    padding-bottom: 20px
}

.hero:before {
    background: linear-gradient(#97daff1c 1px, #0000 1px) 0 0/58px 58px, linear-gradient(90deg, #97daff1c 1px, #0000 1px) 0 0/58px 58px, linear-gradient(116deg, #0000 0 53%, #77deff1f 53% 53.15%, #0000 53.15% 71%, #77deff14 71% 71.15%, #0000 71.15%);
    width: 100%;
    height: 100%;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #0000 28%, #000 48% 100%);
    mask-image: linear-gradient(90deg, #0000 28%, #000 48% 100%)
}

.hero:after {
    background: radial-gradient(at 75% 100%, #020f3d99, #0000 48%), linear-gradient(90deg, #0000 34%, #05469c1f 43%, #0000 58%)
}

.hero-copy {
    z-index: 7;
    align-self: center;
    padding-bottom: 26px
}

.hero h1 {
    color: #102f56;
    text-shadow: none;
    font-size: clamp(42px, 3.1vw, 59px)
}

.hero-slogan {
    color: #0870da;
    text-shadow: none
}

.hero-lead {
    color: #596d86;
    max-width: 545px
}

.hero-products {
    align-self: center;
    height: 706px;
    overflow: visible
}

.ai-architecture {
    filter: drop-shadow(0 32px 60px #00194e33);
    width: min(830px, 100%);
    height: 690px
}

.ai-architecture:before {
    background: radial-gradient(circle at center, #45d0ff47 0, #1987e81f 39%, #083d9714 62%, transparent 63%), conic-gradient(from 40deg, transparent 0 18%, #8be8ff4d 18% 18.5%, transparent 18.5% 51%, #8be8ff2e 51% 51.4%, transparent 51.4%);
    border-color: #99e6ff5c;
    width: 486px;
    height: 486px;
    top: 42px;
    box-shadow: 0 0 90px #25b8ff47, inset 0 0 70px #5bd7ff21
}

.ai-architecture:after {
    background: 0 0;
    border: 1px dashed #b0edff7a;
    width: 382px;
    height: 382px;
    animation: 34s linear infinite architecture-spin;
    top: 94px
}

.runtime-core {
    background: linear-gradient(145deg, #1fb5f5f5, #0867dbfa 56%, #04308bfa);
    border-color: #dcfaffe6;
    width: 274px;
    height: 274px;
    top: 135px;
    box-shadow: 0 24px 70px #0021706b, 0 0 0 11px #6edcff21, inset 0 0 42px #96efff29
}

.runtime-core small {
    color: #d7f6ff
}

.runtime-core strong {
    font-size: 29px
}

.runtime-core em {
    color: #ffffffdb
}

.capability-layer {
    z-index: 8;
    pointer-events: none;
    width: 570px;
    height: 330px;
    display: block;
    top: 60px;
    left: 50%;
    right: auto;
    transform: translate(-50%)
}

.capability-layer span {
    color: #eafbff;
    letter-spacing: .14em;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg, #043687eb, #1582dacc);
    border: 1px solid #a1e7ffb8;
    border-radius: 4px;
    width: 116px;
    min-height: 50px;
    font-size: 12px;
    font-weight: 750;
    position: absolute;
    box-shadow: 0 12px 30px #00226340, inset 0 0 22px #4ccdff1f
}

.capability-layer span:before {
    content: "";
    background: #75e8ff;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    position: absolute;
    box-shadow: 0 0 13px #55dfff
}

.capability-layer span:after {
    content: "";
    background: linear-gradient(90deg, #8be6ffcc, #0000);
    height: 1px;
    position: absolute;
    box-shadow: 0 0 10px #46d5ffb3
}

.capability-layer span:first-child {
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.capability-layer span:first-child:before {
    bottom: -4px;
    left: 50%
}

.capability-layer span:first-child:after {
    transform-origin: 0;
    width: 78px;
    top: 100%;
    left: 50%;
    transform: rotate(90deg)
}

.capability-layer span:nth-child(2) {
    top: 160px;
    left: 0
}

.capability-layer span:nth-child(2):before {
    top: 50%;
    right: -4px
}

.capability-layer span:nth-child(2):after {
    transform-origin: 0;
    width: 92px;
    top: 50%;
    left: 100%;
    transform: rotate(9deg)
}

.capability-layer span:nth-child(3) {
    top: 160px;
    right: 0
}

.capability-layer span:nth-child(3):before {
    top: 50%;
    left: -4px
}

.capability-layer span:nth-child(3):after {
    transform-origin: 100%;
    width: 92px;
    top: 50%;
    right: 100%;
    transform: rotate(-9deg)
}

.machine-rail {
    align-items: end;
    gap: 18px;
    height: 305px;
    bottom: -2px;
    left: 0;
    right: 0
}

.machine-rail:before {
    clip-path: polygon(3% 0, 97% 0, 100% 42%, 97% 100%, 3% 100%, 0 42%);
    background: linear-gradient(#4db4f233, #01236780);
    border: 1px solid #8bdeff5c;
    height: 82px;
    bottom: 25px;
    left: 2%;
    right: 2%;
    box-shadow: 0 20px 42px #00164b4d, inset 0 0 24px #4ecbff1f
}

.machine-rail:after {
    background: linear-gradient(90deg, #0000, #88e8ff 12% 88%, #0000);
    display: block;
    bottom: 102px;
    left: 5%;
    right: 5%;
    box-shadow: 0 0 18px #59dfffe6
}

.machine-slot {
    justify-content: flex-end;
    height: 305px
}

.machine-slot:before {
    display: none
}

.machine-slot img {
    filter: drop-shadow(15px 23px 18px #00123e75);
    animation: 7s ease-in-out infinite machine-hover
}

.slot-workstation img {
    width: 162px;
    height: 265px
}

.slot-supernode img {
    width: 184px;
    height: 265px;
    animation-delay: -2s
}

.slot-server img {
    width: 252px;
    height: 205px;
    margin-bottom: 30px;
    animation-delay: -4s
}

.machine-slot figcaption {
    z-index: 4;
    color: #d9f4ff;
    letter-spacing: .15em;
    text-shadow: 0 2px 10px #001e578c;
    height: 24px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    bottom: 0
}

@media (width<=1279px) and (width>=981px) {
    .hero {
        grid-template-columns: .82fr 1.18fr;
        padding-top: 18px
    }

    .hero-products {
        height: 690px
    }

    .ai-architecture {
        transform-origin: 50%;
        transform: scale(.82)
    }
}

@media (width<=980px) {
    .hero {
        background: linear-gradient(165deg, #f7fbff 0 34%, #0d69c6 54%, #04357d 100%);
        height: auto;
        min-height: 1000px;
        padding-top: 60px
    }

    .hero-products {
        height: 620px
    }

    .hero-copy {
        padding-bottom: 0
    }

    .ai-architecture {
        transform-origin: 50%;
        transform: scale(.86)
    }
}

@media (width<=620px) {
    .hero {
        min-height: 900px;
        padding-top: 42px
    }

    .hero-products {
        height: 500px
    }

    .ai-architecture {
        transform-origin: 50%;
        width: 830px;
        transform: scale(.56)
    }

    .capability-layer {
        right: auto
    }
}

.hero {
    background-color: #eaf4ff;
    background-image: url(../hero-ai-work-sharp.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    height: min(750px, 39.0625vw);
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: flex
}

.hero:before,
.hero:after {
    display: none
}

.hero-copy {
    color: #071d47;
    align-self: auto;
    width: 650px;
    max-width: 45%;
    padding: 0 0 8px;
    font-family: HarmonyOS Sans SC, Source Han Sans CN, Noto Sans CJK SC, PingFang SC, Microsoft YaHei, sans-serif
}

.hero h1 {
    white-space: nowrap;
    color: #071d47;
    letter-spacing: -.055em;
    text-shadow: none;
    margin: 0;
    font-size: clamp(48px, 3.75vw, 72px);
    font-weight: 800;
    line-height: 1.12
}

.hero-slogan {
    color: #075fd3;
    letter-spacing: .045em;
    text-shadow: none;
    margin-top: 17px;
    font-size: clamp(27px, 1.98vw, 38px);
    font-weight: 700;
    line-height: 1.2
}

.hero-rule {
    align-items: center;
    width: min(380px, 86%);
    height: 4px;
    margin: 24px 0 19px;
    display: flex
}

.hero-rule i {
    background: linear-gradient(90deg, #004fd0, #19b9e7);
    border-radius: 4px;
    width: 62px;
    height: 4px;
    box-shadow: 0 0 12px #1086e12e
}

.hero-rule span {
    background: linear-gradient(90deg, #24559157, #0000);
    flex: 1;
    height: 1px
}

.hero-meta {
    color: #263c5a;
    letter-spacing: .01em;
    align-items: center;
    gap: 13px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.hero-meta span {
    white-space: nowrap
}

.hero-meta b {
    background: #8ea7c5;
    width: 1px;
    height: 13px;
    transform: skew(-16deg)
}

.hero .hero-lead {
    color: #273c58;
    letter-spacing: .005em;
    max-width: 565px;
    margin: 0;
    font-size: 15px;
    font-weight: 560;
    line-height: 1.85
}

@media (width>=1921px) {
    .hero {
        background-size: 1920px 750px;
        height: 750px
    }
}

@media (width<=1279px) and (width>=981px) {
    .hero {
        height: 39.0625vw;
        min-height: 0;
        padding-top: 0
    }

    .hero-copy {
        max-width: 47%;
        padding-bottom: 0
    }

    .hero h1 {
        font-size: clamp(38px, 3.7vw, 48px)
    }

    .hero-slogan {
        margin-top: 11px;
        font-size: clamp(22px, 2.05vw, 28px)
    }

    .hero-rule {
        margin: 17px 0 14px
    }

    .hero-meta {
        gap: 8px;
        font-size: 10px
    }

    .hero .hero-lead {
        max-width: 470px;
        font-size: 11px;
        line-height: 1.7
    }
}

@media (width<=980px) {
    .hero {
        aspect-ratio: 1920/750;
        background-position: 50%;
        background-size: cover;
        height: auto;
        min-height: 0;
        padding: 0 24px
    }

    .hero-copy {
        max-width: 48%;
        padding: 0
    }

    .hero h1 {
        font-size: clamp(21px, 4.5vw, 34px)
    }

    .hero-slogan {
        margin-top: 7px;
        font-size: clamp(15px, 3vw, 22px)
    }

    .hero-rule {
        height: 3px;
        margin: 11px 0 9px
    }

    .hero-rule i {
        width: 44px;
        height: 3px
    }

    .hero-meta,
    .hero .hero-lead {
        display: none
    }
}

@media (width<=620px) {
    .hero {
        min-height: 0;
        padding: 0 16px
    }

    .hero-copy {
        max-width: 51%
    }

    .hero h1 {
        font-size: clamp(17px, 4.7vw, 27px)
    }

    .hero-slogan {
        letter-spacing: 0;
        font-size: clamp(12px, 3.2vw, 18px)
    }
}

body {
    background: #f6faff
}

.section-heading h2,
.solution-top h2,
.guide-copy h2,
.consult-copy h2 {
    color: #0a2c58;
    letter-spacing: -.055em;
    margin: 18px 0 0;
    font-size: clamp(40px, 3.35vw, 58px);
    line-height: 1.16
}

.section-heading.centered,
.solution-top.centered,
.guide-copy.centered,
.consult-copy.centered {
    text-align: center;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto
}

.section-heading.centered>p:last-child,
.solution-top.centered>p:last-child,
.guide-copy.centered>p:not(.eyebrow),
.consult-copy.centered>p:not(.eyebrow) {
    color: #607793;
    max-width: 760px;
    margin: 22px auto 0;
    font-size: 15px;
    line-height: 1.9
}

.eyebrow {
    color: #2675ca;
    letter-spacing: .24em
}

.challenge {
    z-index: 0;
    padding-top: 126px;
    padding-bottom: 142px;
    position: relative
}

.challenge:before {
    content: "";
    z-index: -1;
    background: radial-gradient(circle at 50% 18%, #64bfff29, #0000 30%), linear-gradient(#f9fcff, #eef7ff);
    position: absolute;
    inset: 0 calc(50% - 50vw)
}

.challenge-heading h2 {
    white-space: nowrap
}

.pain-grid {
    gap: 22px;
    margin-top: 0
}

.pain-card {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid #4891d72e;
    border-radius: 28px;
    min-height: 570px;
    padding: 0 30px 34px;
    transition: transform .35s, box-shadow .35s;
    box-shadow: 0 24px 70px #255b941f, inset 0 1px #ffffffe6;
    background: #ffffffc7 !important
}

.pain-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 80px #255b942e
}

.pain-card.coral {
    background: linear-gradient(#e8f7ffeb, #fffffff2) !important
}

.pain-card.sand {
    background: linear-gradient(#edf2fff0, #fffffff5) !important
}

.pain-card.mint {
    background: linear-gradient(#e5f9fff0, #fffffff5) !important
}

.pain-visual.pain-3d {
    background: #edf7ff;
    border-bottom: 1px solid #3e85cd1f;
    height: 340px;
    margin: 0 -30px 25px;
    overflow: hidden
}

.pain-visual.pain-3d:after {
    display: none
}

.pain-3d img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.card-index {
    color: #3181d2;
    font-size: 9px;
    font-weight: 800
}

.pain-card h3 {
    color: #0b315f;
    margin: 12px 0 9px;
    font-size: 29px
}

.pain-card>p {
    color: #667c94;
    font-size: 13px
}

.solution {
    color: #0b2d57;
    background: radial-gradient(circle at 50% 0, #4bb1ff3d, #0000 28%), linear-gradient(#eaf6ff, #dceefe);
    padding-top: 126px;
    padding-bottom: 140px
}

.solution-noise {
    opacity: .34;
    background-image: linear-gradient(#1b70c714 1px, #0000 1px), linear-gradient(90deg, #1b70c714 1px, #0000 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(circle, #000, #0000 78%);
    mask-image: radial-gradient(circle, #000, #0000 78%)
}

.solution-top {
    display: block
}

.solution-top .eyebrow {
    color: #1576d3
}

.solution-stage {
    gap: 22px;
    margin-top: 60px
}

.solution-console {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #ffffffb8;
    border: 1px solid #4e99de40;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 90px #2368a826, inset 0 1px #ffffffeb
}

.console-head {
    color: #66809e;
    background: #eff8ffd1;
    border-color: #448dd22e
}

.console-head i {
    background: #1fa8e8
}

.console-head em {
    color: #0e8b68
}

.console-flow {
    min-height: 350px
}

.flow-column {
    background: linear-gradient(160deg, #e5f3fff2, #f8fcfff5);
    border: 1px solid #4b96da29;
    box-shadow: 0 13px 28px #23609b12
}

.flow-column small {
    color: #2277c7
}

.flow-column b {
    color: #173c67
}

.flow-column span {
    color: #54708f;
    background: #ffffffc7;
    border: 1px solid #4e93d31f
}

.flow-column.central {
    background: linear-gradient(145deg, #2398e8, #0759be);
    border-color: #8cddff;
    box-shadow: 0 20px 45px #0c63be3d
}

.flow-column.central b,
.flow-column.central span {
    color: #fff
}

.flow-column.central small {
    color: #d5f5ff
}

.flow-column.central span {
    background: #01357f40;
    border-color: #ffffff2e
}

.flow-arrow {
    background: #159cdd
}

.flow-arrow strong {
    color: #3978ad
}

.console-stats {
    background: #eef7ffcc;
    border-color: #438dd22e
}

.console-stats span {
    color: #69829c;
    border-color: #438dd224
}

.console-stats b {
    color: #0e5fb8
}

.capability-list {
    background: 0 0;
    border: 0;
    gap: 12px
}

.capability-list article {
    background: #ffffffc2;
    border: 1px solid #4c95d82e;
    border-radius: 18px;
    box-shadow: 0 16px 35px #2a679f17
}

.capability-list article>span {
    color: #1685d5
}

.capability-list h3 {
    color: #143b67
}

.capability-list p {
    color: #6b8096
}

.editions {
    z-index: 0;
    isolation: isolate;
    background: 0 0;
    padding-top: 126px;
    padding-bottom: 140px;
    position: relative;
    overflow: visible
}

.editions:before {
    content: "";
    z-index: -1;
    background: linear-gradient(#fff, #f7fbff);
    position: absolute;
    inset: 0 calc(50% - 50vw)
}

.edition-card {
    border: 1px solid #438cd32b;
    border-radius: 28px;
    min-height: 590px;
    transition: transform .35s;
    box-shadow: 0 28px 78px #285d911c
}

.edition-card:hover {
    transform: translateY(-7px)
}

.edition-number {
    color: #0a57b014
}

.edition-label {
    color: #1774ce
}

.edition-card h3 {
    color: #0b315d
}

.edition-card>p {
    color: #647b94
}

.edition-card li {
    color: #435f7e
}

.edition-orbit,
.edition-orbit i {
    border-color: #126fcd29
}

.products {
    z-index: 1;
    isolation: isolate;
    background: radial-gradient(circle at 50% 0, #47c6ff3b, #0000 26%), linear-gradient(140deg, #083d8d, #075cbb 56%, #063b8a);
    padding-top: 128px;
    padding-bottom: 140px;
    position: relative
}

.products-inner {
    position: relative
}

.light-heading h2 {
    color: #fff
}

.light-heading>p:last-child {
    color: #c5dcf4 !important
}

.product-tabs {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #02266147;
    border: 1px solid #ffffff30;
    border-radius: 20px;
    margin-top: 0;
    overflow: hidden
}

.product-tabs button {
    border-color: #ffffff21;
    border-radius: 0
}

.product-tabs button.active {
    background: linear-gradient(145deg, #51c2ff40, #ffffff14)
}

.product-detail {
    border: 1px solid #ffffff38;
    border-radius: 28px;
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 38px 95px #0117434d
}

.product-image-wrap {
    background: radial-gradient(circle at 50% 44%, #6acdff3b, #0000 38%), linear-gradient(145deg, #eaf7ff, #cfe8fb)
}

.product-copy {
    background: #f9fcff
}

.product-meta div {
    background: #edf6fd;
    border: 1px solid #4389ca1f;
    border-radius: 12px
}

.product-copy li {
    background: #f7fbff;
    border-color: #bfd6e9;
    border-radius: 999px
}

.experience {
    z-index: 0;
    padding-top: 126px;
    padding-bottom: 142px;
    position: relative
}

.experience:before {
    content: "";
    z-index: -1;
    background: radial-gradient(circle at 50% 8%, #47b1ff29, #0000 28%), linear-gradient(#eff8ff, #f9fcff);
    position: absolute;
    inset: 0 calc(50% - 50vw)
}

.experience-grid {
    gap: 22px
}

.experience-card {
    background: #ffffffdb;
    border: 1px solid #468fd32e;
    border-radius: 28px;
    scroll-margin-top: 32px;
    overflow: hidden;
    box-shadow: 0 28px 75px #2660991f
}

.experience-screen {
    background: radial-gradient(circle at 50% 45%, #37a8ec33, #0000 34%), linear-gradient(145deg, #e9f6ff, #d7ebfa);
    height: 350px
}

.experience-screen:before {
    opacity: .7;
    -webkit-mask-image: radial-gradient(circle, #000, #0000 75%);
    mask-image: radial-gradient(circle, #000, #0000 75%)
}

.premium-screen {
    background: radial-gradient(circle at 50% 45%, #5dd8ff40, #0000 35%), linear-gradient(145deg, #0a64c3, #073b87)
}

.task-flow b {
    border-color: #458fd333;
    border-radius: 14px;
    box-shadow: 0 18px 32px #215e9624
}

.task-flow i {
    box-shadow: 0 10px 22px #0f69c73d
}

.agent-window {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #042c69c2;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 28px 55px #00184552
}

.experience-copy h3 {
    color: #103762
}

.experience-copy p {
    color: #667c93
}

.guide {
    background: radial-gradient(circle at 50% 18%, #3aa8f024, #0000 28%), #fff;
    grid-template-columns: 1fr;
    gap: 54px;
    padding: 126px max(40px, 50vw - 760px) 138px;
    display: grid
}

.guide-copy {
    background: 0 0;
    order: -1;
    padding: 0
}

.guide-copy h2 {
    margin-top: 18px
}

.guide-copy>a {
    margin: 30px auto 0
}

.guide-steps {
    background: linear-gradient(145deg, #f0f9fff5, #e1f2ffe6);
    border: 1px solid #448ed32e;
    border-radius: 30px;
    min-height: 245px;
    padding: 54px;
    box-shadow: 0 30px 80px #2660971f
}

.guide-steps>span {
    color: #1769bd;
    background: linear-gradient(145deg, #fff, #dff1ff);
    border: 1px solid #3e9adf40;
    width: 116px;
    height: 116px;
    font-size: 17px;
    box-shadow: 0 18px 35px #196cb221
}

.guide-steps>i {
    background: linear-gradient(90deg, #78c7ef, #168bd2, #78c7ef);
    height: 2px
}

.button-dark {
    background: linear-gradient(90deg, #075fd1, #1599e3);
    border-radius: 999px;
    box-shadow: 0 16px 34px #1269c233
}

.consult {
    color: #0d315d;
    background: radial-gradient(circle at 50% 5%, #42b7ff40, #0000 25%), linear-gradient(#e8f6ff, #d8edff);
    grid-template-columns: 1fr;
    gap: 52px;
    padding-top: 126px;
    padding-bottom: 140px;
    display: grid
}

.consult-copy {
    max-width: 980px
}

.consult-tags {
    justify-content: center
}

.consult-tags span {
    color: #2e659c;
    background: #ffffff80;
    border-color: #3489d040;
    border-radius: 999px
}

.form-shell {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #ffffffdb;
    border: 1px solid #418fd633;
    border-radius: 30px;
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 42px;
    box-shadow: 0 32px 85px #235e9726
}

.form-shell label {
    color: #4f6985
}

.form-shell input,
.form-shell select,
.form-shell textarea {
    color: #173b62;
    background: #f8fcff;
    border-color: #c7daeb;
    border-radius: 10px
}

.submit-button {
    background: linear-gradient(90deg, #0661d2, #16a5e7);
    border-radius: 999px;
    height: 54px;
    box-shadow: 0 14px 32px #0a6ac833
}

.footer {
    background: #062a61
}

.floating-consult {
    border-radius: 999px
}

@media (width<=980px) {
    .challenge-heading h2 {
        white-space: normal
    }

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

    .pain-card {
        min-height: 540px
    }

    .solution-stage,
    .edition-grid {
        grid-template-columns: 1fr
    }

    .guide {
        padding-left: 24px;
        padding-right: 24px
    }

    .guide-steps {
        padding: 36px 22px
    }

    .guide-steps>span {
        width: 86px;
        height: 86px
    }

    .consult {
        padding-left: 24px;
        padding-right: 24px
    }
}

@media (width<=620px) {

    .section-heading h2,
    .solution-top h2,
    .guide-copy h2,
    .consult-copy h2 {
        font-size: 34px
    }

    .challenge,
    .editions,
    .experience,
    .solution,
    .products,
    .guide,
    .consult {
        padding-top: 88px;
        padding-bottom: 94px
    }

    .pain-visual.pain-3d {
        height: 270px
    }

    .pain-card {
        min-height: 480px
    }

    .product-detail {
        border-radius: 20px
    }

    .guide-steps {
        justify-content: flex-start;
        min-height: auto;
        overflow-x: auto
    }

    .guide-steps>span {
        flex: 0 0 76px;
        width: 76px;
        height: 76px
    }

    .guide-steps>i {
        flex: 0 0 18px
    }

    .form-shell {
        padding: 26px 20px
    }
}

.section-heading h2,
.solution-top h2,
.guide-copy h2,
.consult-copy h2 {
    margin-top: 0;
    font-size: clamp(38px, 2.8vw, 50px)
}

.section-heading.centered,
.solution-top.centered,
.guide-copy.centered,
.consult-copy.centered {
    margin-bottom: 38px
}

.section-heading.centered>p:last-child,
.solution-top.centered>p:last-child,
.guide-copy.centered>p:not(.eyebrow),
.consult-copy.centered>p:not(.eyebrow) {
    margin-top: 15px;
    line-height: 1.75
}

.pain-grid {
    gap: 18px
}

.pain-card {
    border-radius: 22px;
    min-height: 430px;
    padding: 0 25px 25px;
    box-shadow: 0 18px 48px #41455617
}

.pain-visual.pain-3d {
    border-radius: 22px 22px 0 0;
    height: 225px;
    margin: 0 -25px 20px
}

.pain-3d img {
    object-fit: cover
}

.pain-card h3 {
    margin: 9px 0 6px;
    font-size: 24px
}

.pain-card>p {
    font-size: 12px;
    line-height: 1.7
}

.pain-card.coral .card-index {
    color: #b85e3f
}

.pain-card.sand .card-index {
    color: #a97513
}

.pain-card.mint .card-index {
    color: #238164
}

.pain-card .pain-visual:not(.pain-3d) {
    height: 235px;
    margin: 0 -25px 20px
}

.pain-card .pain-visual:not(.pain-3d):after {
    display: block
}

.solution {
    background: radial-gradient(circle at 15% 5%, #5c81d826, #0000 25%), linear-gradient(150deg, #eef1fb, #e4eafa);
    padding-top: 82px;
    padding-bottom: 90px
}

.solution-noise {
    opacity: .18
}

.solution-stage {
    margin-top: 38px
}

.solution-console {
    border-radius: 22px
}

.console-head {
    height: 42px
}

.console-flow {
    min-height: 275px;
    padding: 24px 20px
}

.flow-column {
    min-height: 205px;
    padding: 17px 14px
}

.console-stats span {
    padding: 12px 15px
}

.capability-list {
    gap: 9px
}

.capability-list article {
    border-radius: 14px;
    padding: 16px
}

.capability-list h3 {
    font-size: 14px
}

.edition-card {
    border-radius: 22px;
    min-height: 465px;
    padding: 36px
}

.edition-card h3 {
    margin: 48px 0 16px;
    font-size: 41px
}

.edition-card>p {
    font-size: 12px
}

.edition-card ul {
    margin: 22px 0 28px
}

.edition-card li {
    margin: 9px 0
}

.edition-card>a {
    bottom: 30px;
    left: 36px
}

.edition-number {
    font-size: 92px
}

.edition-orbit {
    width: 260px;
    height: 260px
}

.foundation-card {
    background: linear-gradient(145deg, #fffdf8, #ece4d5)
}

.premium-card {
    background: linear-gradient(145deg, #eef1f8, #dce3f0)
}

.products {
    background: radial-gradient(circle at 78% 2%, #47c7ff33, #0000 24%), linear-gradient(140deg, #082f71, #0756a9 58%, #082f6e);
    padding-top: 84px;
    padding-bottom: 92px
}

.light-heading {
    margin-bottom: 38px
}

.product-tabs button {
    min-height: 88px;
    padding-top: 16px;
    padding-bottom: 16px
}

.product-detail,
.product-image-wrap {
    min-height: 500px
}

.product-image-wrap img {
    height: 380px
}

.product-detail.supernode .product-image-wrap img {
    height: 410px
}

.product-copy {
    padding: 46px 45px
}

.product-copy h3 {
    margin-top: 18px
}

.experience {
    padding-top: 82px;
    padding-bottom: 90px
}

.experience:before {
    background: radial-gradient(circle at 50% 0, #40a0741c, #0000 25%), linear-gradient(#edf8f2, #e5f2eb)
}

.experience-screen {
    height: 275px
}

.experience-copy {
    padding: 27px 30px 32px
}

.experience-copy h3 {
    margin: 13px 0 8px;
    font-size: 22px
}

.experience-copy p {
    font-size: 11px
}

.experience-card {
    border-radius: 22px;
    box-shadow: 0 18px 52px #2a5b461a
}

.guide {
    background: radial-gradient(circle at 50% 0, #8362bd1c, #0000 26%), linear-gradient(#f5f1fa, #ece7f4);
    gap: 32px;
    padding-top: 82px;
    padding-bottom: 90px
}

.guide-copy {
    margin-bottom: 0 !important
}

.guide-copy>a {
    margin-top: 22px
}

.guide-steps {
    background: linear-gradient(145deg, #ffffffe0, #ebe4f7eb);
    border-radius: 22px;
    min-height: 170px;
    padding: 32px 44px;
    box-shadow: 0 18px 52px #58447d1c
}

.guide-steps>span {
    color: #67509b;
    background: linear-gradient(145deg, #fff, #eee6fa);
    width: 88px;
    height: 88px
}

.guide-steps>i {
    background: linear-gradient(90deg, #c3b1de, #8268b1, #c3b1de)
}

.consult {
    color: #fff;
    background: radial-gradient(circle at 50% 0, #2ab2ec3d, #0000 28%), linear-gradient(145deg, #071d40, #0a4c8b);
    gap: 35px;
    padding-top: 82px;
    padding-bottom: 92px
}

.consult-copy {
    margin-bottom: 0 !important
}

.consult-copy h2 {
    color: #fff
}

.consult-copy>p:not(.eyebrow) {
    color: #bfd3e8 !important
}

.consult-tags {
    margin-top: 20px
}

.consult-tags span {
    color: #d5e7f7;
    background: #ffffff14;
    border-color: #ffffff38
}

.form-shell {
    border-radius: 22px;
    width: min(850px, 100%);
    padding: 32px;
    box-shadow: 0 28px 70px #00112e40
}

.form-title {
    margin-bottom: 18px
}

.field-row {
    gap: 12px
}

.form-shell label {
    margin-bottom: 11px
}

.form-shell input,
.form-shell select,
.form-shell textarea {
    margin-top: 6px;
    padding-top: 10px;
    padding-bottom: 10px
}

@media (width<=620px) {

    .section-heading h2,
    .solution-top h2,
    .guide-copy h2,
    .consult-copy h2 {
        font-size: 31px
    }

    .challenge,
    .solution,
    .editions,
    .products,
    .experience,
    .guide,
    .consult {
        padding-top: 62px;
        padding-bottom: 68px
    }

    .pain-card {
        min-height: 415px
    }

    .pain-visual.pain-3d {
        height: 220px
    }

    .console-flow {
        min-height: auto
    }

    .edition-card {
        min-height: 450px
    }

    .product-detail {
        min-height: auto
    }

    .product-image-wrap {
        min-height: 360px
    }

    .product-image-wrap img {
        height: 300px
    }

    .experience-screen {
        height: 245px
    }

    .guide-steps {
        min-height: 130px
    }
}

@media (width<=980px) {
    .challenge {
        margin-top: -64px;
        padding-top: 146px
    }

    .challenge:before {
        -webkit-mask-image: linear-gradient(#0000 0 42px, #000 64px 100%);
        mask-image: linear-gradient(#0000 0 42px, #000 64px 100%)
    }
}

@media (width<=620px) {
    .challenge {
        margin-top: -38px;
        padding-top: 100px
    }

    .challenge:before {
        -webkit-mask-image: linear-gradient(#0000 0 25px, #000 38px 100%);
        mask-image: linear-gradient(#0000 0 25px, #000 38px 100%)
    }
}

.pain-visual {
    perspective: 1000px;
    transform-style: preserve-3d;
    background-image: radial-gradient(circle at 50% 24%, #ffffffb8, #0000 42%)
}

.pain-visual:before {
    content: "";
    z-index: 1;
    filter: blur(7px);
    background: radial-gradient(#1f68a71f, #1f68a706 54%, #0000 72%);
    border-radius: 50%;
    height: 38px;
    position: absolute;
    bottom: 22px;
    left: 14%;
    right: 14%
}

.boundary-doc,
.boundary-cloud,
.boundary-alert,
.boundary-path,
.token-ring,
.token-bars,
.token-chip,
.agent-node,
.agent-lock {
    transition: transform .4s, filter .4s, box-shadow .4s
}

.boundary-doc {
    background: linear-gradient(145deg, #fffffffa, #f4f9fde6);
    border-color: #6990b440;
    transform: rotate(-4deg)rotateY(-6deg)translateZ(13px);
    box-shadow: 0 18px 34px #42638224, inset 0 1px #fff
}

.boundary-doc i {
    background: linear-gradient(90deg, #aebdcb, #dbe5ee)
}

.boundary-cloud {
    filter: drop-shadow(0 15px 16px #1b426733)drop-shadow(0 0 12px #54b0f314);
    background: linear-gradient(145deg, #1b3c5e, #102a45);
    transform: translateZ(18px)
}

.boundary-path {
    filter: drop-shadow(0 3px 4px #e4574f2e);
    transform: translateZ(9px)
}

.boundary-alert {
    background: linear-gradient(145deg, #ff7169, #df4740);
    transform: translateZ(21px);
    box-shadow: 0 12px 20px #ca413a33, inset 0 1px #ffffff73
}

.token-ring {
    background: conic-gradient(#df991a 0 78%, #5244281f 78%);
    transform: rotateY(-5deg)translateZ(13px);
    box-shadow: inset 0 0 0 21px #efe5ca, 0 18px 32px #775b2324, 0 0 20px #ffffff40
}

.token-ring:before {
    background: radial-gradient(circle at 38% 28%, #fffdf8, #f8f1df 72%)
}

.token-bars {
    filter: drop-shadow(0 13px 10px #23394e26);
    transform: translateZ(15px)
}

.token-bars i {
    background: linear-gradient(#284c6c, #173653);
    box-shadow: inset 1px 0 #ffffff26
}

.token-bars i:last-child {
    background: linear-gradient(#efad2f, #d48f15)
}

.token-chip {
    background: linear-gradient(145deg, #214665, #12304e);
    transform: translateZ(20px);
    box-shadow: 0 11px 20px #1e3e5b26, inset 0 1px #ffffff2e
}

.agent-node {
    background: radial-gradient(circle at 34% 28%, #fff, #f6fbf9 67%, #e0eee9);
    transform: translateZ(10px);
    box-shadow: 0 13px 23px #215b4c21, inset -3px -4px 8px #29715e0d
}

.agent-node.core {
    background: radial-gradient(circle at 34% 27%, #1d6253, #123e35 63%, #0b3029);
    transform: translate(-50%, -50%)translateZ(19px);
    box-shadow: 0 18px 30px #0f443833, 0 0 18px #49bf9d14, inset 0 1px #ffffff29
}

.agent-node.n1 {
    transform: translateZ(9px)
}

.agent-node.n2 {
    transform: translateZ(12px)
}

.agent-node.n3 {
    transform: translateZ(8px)
}

.agent-line {
    background: linear-gradient(90deg, #4b978247, #6aab99, #4b97823d);
    height: 1px
}

.agent-lock {
    background: linear-gradient(145deg, #3bd2a0, #19a97c);
    transform: translateZ(22px);
    box-shadow: 0 14px 23px #1a976f33, 0 0 16px #35d3a51a, inset 0 1px #ffffff59
}

.pain-card:hover .boundary-doc,
.pain-card:hover .token-ring,
.pain-card:hover .agent-node.core {
    filter: brightness(1.025)
}

.pain-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 18px 50px #30679e17, inset 0 1px #fffffff5
}

.pain-card.coral {
    border-color: #dc77552e;
    background: radial-gradient(circle at 18% 0, #fff 0, #ffffff38 40%, #0000 61%), linear-gradient(155deg, #ffe9e1 0%, #fff8f5 72%, #fff 100%) !important
}

.pain-card.sand {
    border-color: #d29e2b2e;
    background: radial-gradient(circle at 18% 0, #fff 0, #ffffff38 40%, #0000 61%), linear-gradient(155deg, #fff0ce 0%, #fffbef 72%, #fff 100%) !important
}

.pain-card.mint {
    border-color: #319e772b;
    background: radial-gradient(circle at 18% 0, #fff 0, #ffffff38 40%, #0000 61%), linear-gradient(155deg, #ddf6ec 0%, #f6fcf9 72%, #fff 100%) !important
}

.pain-visual {
    border-bottom-color: #4084c31a
}

.pain-card:hover {
    box-shadow: 0 26px 62px #30679e21, inset 0 1px #fff
}

.token-ring {
    box-shadow: inset 0 0 0 21px #fff2d7, 0 18px 32px #775b231f, 0 0 22px #ffffff8c
}

.challenge-heading {
    max-width: 930px !important;
    margin-bottom: 42px !important
}

.challenge-heading h2 {
    color: #0b2b50;
    letter-spacing: -.045em
}

.challenge-heading>p {
    color: #61758c !important;
    max-width: 760px !important
}

.exposure-map {
    color: #fff;
    background: radial-gradient(circle at 47% 48%, #1389f642, #0000 31%), radial-gradient(circle at 92% 16%, #29c1ff29, #0000 25%), linear-gradient(118deg, #071b3d, #082e67 54%, #061c42);
    border: 1px solid #5ca8ee5c;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 32px 80px #0f437933
}

.exposure-map:before {
    content: "";
    background-image: linear-gradient(#6fc5ff0f 1px, #0000 1px), linear-gradient(90deg, #6fc5ff0f 1px, #0000 1px);
    background-size: 42px 42px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 30% 74%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 30% 74%, #0000)
}

.exposure-map:after {
    content: "";
    background: linear-gradient(90deg, #0000, #39cbff 20%, #8ee7ff 50%, #39cbff 80%, #0000);
    height: 1px;
    position: absolute;
    top: 47%;
    left: 8%;
    right: 8%;
    box-shadow: 0 0 24px #34caffbf
}

.exposure-topline {
    z-index: 5;
    color: #a6c7e7;
    letter-spacing: .12em;
    border-bottom: 1px solid #86d0ff2e;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    padding: 0 24px;
    font-size: 11px;
    display: flex;
    position: relative
}

.exposure-topline>span:before {
    content: "";
    vertical-align: middle;
    background: #42d5ff;
    width: 22px;
    height: 2px;
    margin-right: 10px;
    display: inline-block;
    box-shadow: 0 0 10px #42d5ff
}

.exposure-topline div {
    color: #77e6c4;
    letter-spacing: .04em;
    align-items: center;
    gap: 8px;
    display: flex
}

.exposure-topline div i {
    background: #4fe8ba;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    animation: 1.8s ease-in-out infinite status-pulse;
    box-shadow: 0 0 12px #4fe8ba
}

@keyframes status-pulse {
    50% {
        opacity: .38
    }
}

.exposure-stage {
    z-index: 2;
    grid-template-columns: 1fr .42fr 1.18fr 1.18fr;
    align-items: center;
    gap: 20px;
    min-height: 390px;
    padding: 34px 34px 28px;
    display: grid;
    position: relative
}

.asset-origin,
.tool-field {
    place-items: center;
    height: 260px;
    display: grid;
    position: relative
}

.asset-orbit {
    border: 1px solid #66ceff38;
    border-radius: 50%;
    position: absolute
}

.orbit-a {
    width: 230px;
    height: 230px
}

.orbit-b {
    border-style: dashed;
    width: 170px;
    height: 170px;
    animation: 22s linear infinite exposure-spin
}

@keyframes exposure-spin {
    to {
        transform: rotate(360deg)
    }
}

.asset-core {
    z-index: 3;
    background: radial-gradient(circle at 35% 26%, #168ee8, #0755b0 60%, #063c86);
    border: 1px solid #75dcff9e;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 132px;
    height: 132px;
    display: flex;
    position: relative;
    box-shadow: 0 0 0 12px #289deb12, 0 0 42px #24aaff52, inset 0 1px #ffffff6b
}

.asset-core small {
    color: #aee9ff;
    font-size: 9px
}

.asset-core strong {
    color: #fff;
    margin: 4px 0;
    font-size: 31px
}

.asset-core em {
    color: #dcf4ffad;
    font-size: 8px;
    font-style: normal
}

.asset-tags {
    z-index: 4;
    gap: 7px;
    display: flex;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%)
}

.asset-tags span {
    color: #afd5f1;
    background: #021634b8;
    border: 1px solid #74ceff42;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 8px
}

.call-stream {
    height: 110px;
    position: relative
}

.call-stream:before,
.call-stream:after {
    content: "";
    background: linear-gradient(90deg, #5bdcff, #5bdcff40);
    height: 1px;
    position: absolute;
    top: 48%;
    left: 0;
    right: 0
}

.call-stream:after {
    opacity: .38;
    top: 59%
}

.call-stream i {
    z-index: 2;
    background: #a9efff;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    animation: 2.5s linear infinite stream-travel;
    position: absolute;
    top: calc(48% - 3px);
    box-shadow: 0 0 13px #42d7ff
}

.call-stream i:nth-child(2) {
    animation-delay: -.8s
}

.call-stream i:nth-child(3) {
    animation-delay: -1.6s
}

@keyframes stream-travel {
    0% {
        left: 0
    }

    to {
        left: 100%
    }
}

.call-stream b {
    white-space: nowrap;
    color: #78a8cf;
    font-size: 8px;
    font-weight: 500;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%)
}

.field-rings,
.field-rings i {
    border: 1px solid #53ccff2e;
    border-radius: 50%;
    position: absolute
}

.field-rings {
    width: 250px;
    height: 250px
}

.field-rings i:first-child {
    border-style: dashed;
    inset: 28px
}

.field-rings i:nth-child(2) {
    inset: 63px
}

.field-rings i:last-child {
    background: #30aaff24;
    inset: 98px;
    box-shadow: 0 0 34px #30aaff29
}

.field-core {
    z-index: 3;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    background: linear-gradient(145deg, #116fcfeb, #062c67f5);
    border: 1px solid #70daffa8;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 188px;
    height: 98px;
    padding: 17px 20px;
    display: flex;
    position: relative;
    box-shadow: 0 0 36px #1ba0ff4f, inset 0 1px #fff3
}

.field-core small {
    color: #8edbff;
    font-size: 8px
}

.field-core strong {
    color: #fff;
    margin: 7px 0;
    font-size: 17px
}

.field-core em {
    color: #a9c5dc;
    font-size: 8px;
    font-style: normal
}

.tool-node {
    z-index: 4;
    text-align: center;
    color: #c9f3ff;
    letter-spacing: .08em;
    background: #021b42e6;
    border: 1px solid #66d7ff66;
    border-radius: 999px;
    min-width: 63px;
    padding: 7px 9px;
    font-size: 8px;
    position: absolute;
    box-shadow: 0 8px 20px #00081e40
}

.tool-a {
    top: 43px;
    left: 4px
}

.tool-b {
    top: 69px;
    right: 3px
}

.tool-c {
    bottom: 37px;
    left: 25px
}

.risk-stack {
    background: #6ac1fa26;
    border: 1px solid #73c6fc33;
    gap: 1px;
    display: grid;
    box-shadow: 0 22px 48px #00071e40
}

.risk-stack article {
    background: linear-gradient(90deg, #062048e6, #08305edb);
    grid-template-columns: 34px 1fr 28px;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 16px 18px;
    transition: all .3s;
    display: grid
}

.risk-stack article:hover {
    background: linear-gradient(90deg, #083166f0, #0b4884e6);
    transform: translate(-5px)
}

.risk-stack article>span {
    color: #48d8ff;
    font-size: 10px
}

.risk-stack h3 {
    color: #fff;
    margin: 0 0 5px;
    font-size: 16px
}

.risk-stack p {
    color: #8faeca;
    margin: 0;
    font-size: 10px;
    line-height: 1.5
}

.risk-stack article>b {
    color: #ff9e90;
    background: #ee493e17;
    border: 1px solid #ff806f80;
    border-radius: 50%;
    place-items: center;
    width: 27px;
    height: 27px;
    font-size: 12px;
    display: grid;
    box-shadow: 0 0 16px #ff63501a
}

.exposure-footer {
    z-index: 5;
    background: #02112a6b;
    border-top: 1px solid #86d0ff2e;
    align-items: center;
    min-height: 64px;
    padding: 0 24px;
    font-size: 11px;
    display: flex;
    position: relative
}

.exposure-footer span {
    color: #7295b5
}

.exposure-footer strong {
    color: #fff;
    margin-left: 18px;
    font-size: 13px
}

.exposure-footer i {
    background: linear-gradient(90deg, #36d4ff, #0000);
    flex: 1;
    height: 1px;
    margin-left: 24px
}

@media (width<=1100px) {
    .exposure-stage {
        grid-template-columns: .9fr .3fr 1fr
    }

    .risk-stack {
        grid-column: 1/-1;
        grid-template-columns: repeat(3, 1fr)
    }

    .risk-stack article {
        min-height: 82px
    }

    .exposure-map:after {
        top: 36%
    }
}

@media (width<=720px) {
    .challenge {
        padding-bottom: 70px
    }

    .challenge-heading {
        margin-bottom: 30px !important
    }

    .exposure-map {
        border-radius: 18px
    }

    .exposure-stage {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 24px 18px
    }

    .asset-origin,
    .tool-field {
        height: 230px
    }

    .call-stream {
        height: 70px;
        transform: rotate(90deg)
    }

    .risk-stack {
        grid-column: auto;
        grid-template-columns: 1fr
    }

    .exposure-map:after {
        display: none
    }

    .exposure-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 15px 18px
    }

    .exposure-footer strong {
        margin-left: 0
    }

    .exposure-footer i {
        display: none
    }
}

.challenge {
    padding-bottom: 94px
}

.challenge:before {
    background: radial-gradient(circle at 12% 58%, #5a9dec14, #0000 24%), radial-gradient(circle at 51% 68%, #f1bb5712, #0000 22%), radial-gradient(circle at 88% 58%, #42bea312, #0000 24%), linear-gradient(#0000 0%, #f4f9ff7a 18%, #fff 48%, #fbfdff 100%)
}

.challenge-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    display: grid
}

.challenge-story {
    min-width: 0;
    position: relative
}

.challenge-story figure {
    isolation: isolate;
    background: #eff6fc;
    border: 1px solid #1d5d9e1f;
    border-radius: 24px;
    height: 286px;
    margin: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 45px #214c791a
}

.challenge-story figure:before {
    content: "";
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 1px #fffffff0
}

.challenge-story figure:after {
    content: "";
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--story-accent), transparent);
    height: 2px;
    box-shadow: 0 0 18px var(--story-accent);
    opacity: .8;
    position: absolute;
    bottom: 0;
    left: 22px;
    right: 22px
}

.challenge-story img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1), filter .4s;
    display: block
}

.story-data {
    --story-accent: #4f7cff;
    --story-number: #5278d7
}

.story-token {
    --story-accent: #e7a229;
    --story-number: #be8120
}

.story-agent {
    --story-accent: #25b99a;
    --story-number: #228d79
}

.story-copy {
    grid-template-columns: 64px 1fr;
    align-items: start;
    gap: 18px;
    margin-top: 20px;
    padding: 0 8px;
    display: grid;
    position: relative
}

.story-copy:before {
    content: "";
    background: linear-gradient(90deg, var(--story-accent), #15497b1f 34%, transparent);
    height: 1px;
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px
}

.story-copy>span {
    color: #0000;
    -webkit-text-stroke: 1px var(--story-number);
    padding-top: 18px
}

@supports (color:color-mix(in lab, red, red)) {
    .story-copy>span {
        -webkit-text-stroke: 1px color-mix(in srgb, var(--story-number) 55%, transparent)
    }
}

.story-copy>span {
    letter-spacing: -.06em;
    font-size: 45px;
    font-weight: 700;
    line-height: 1
}

.story-copy>div {
    padding-top: 16px
}

.story-copy h3 {
    color: #102f54;
    letter-spacing: -.035em;
    margin: 0 0 8px;
    font-size: 25px
}

.story-copy p {
    color: #61758b;
    max-width: 340px;
    margin: 0;
    line-height: 1.75
}

@media (width<=980px) {
    .challenge-gallery {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .challenge-story {
        grid-template-columns: minmax(300px, .95fr) 1.05fr;
        align-items: center;
        gap: 26px;
        display: grid
    }

    .challenge-story figure {
        height: 260px
    }

    .story-copy {
        margin-top: 0
    }

    .challenge-story:nth-child(2n) figure {
        order: 2
    }

    .challenge-story:nth-child(2n) .story-copy {
        order: 1
    }
}

@media (width<=620px) {
    .challenge-gallery {
        gap: 34px
    }

    .challenge-story {
        display: block
    }

    .challenge-story figure {
        border-radius: 18px;
        height: 235px
    }

    .challenge-story:nth-child(2n) figure,
    .challenge-story:nth-child(2n) .story-copy {
        order: initial
    }

    .story-copy {
        grid-template-columns: 50px 1fr;
        gap: 12px;
        margin-top: 16px
    }

    .story-copy>span {
        font-size: 38px
    }

    .story-copy h3 {
        font-size: 22px
    }
}

.challenge-story figure {
    border-radius: 20px;
    height: 310px;
    box-shadow: 0 16px 38px #224b7414
}

.story-data figure {
    background: #edf3ff
}

.story-token figure {
    background: #fff3dd
}

.story-agent figure {
    background: #eaf7f2
}

.challenge-story figure:after {
    opacity: .55;
    bottom: 54px
}

.challenge-story img {
    object-fit: contain;
    height: 254px;
    padding: 18px 18px 6px
}

.challenge-story:hover img {
    transform: translateY(-3px)scale(1.015)
}

.diagram-caption {
    z-index: 4;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffffb3;
    border-top: 1px solid #1545731a;
    grid-template-columns: 1.25fr auto .9fr;
    align-items: center;
    gap: 10px;
    min-height: 55px;
    padding: 0 16px;
    font-size: 9px;
    font-style: normal;
    display: grid;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.diagram-caption span {
    color: #344e6b;
    font-weight: 700
}

.diagram-caption b {
    color: var(--story-number);
    white-space: nowrap;
    font-weight: 800
}

.diagram-caption em {
    color: #d04f45;
    white-space: nowrap;
    justify-self: end;
    font-size: 9px;
    font-style: normal;
    font-weight: 800
}

@media (width<=980px) {
    .challenge-story figure {
        height: 285px
    }

    .challenge-story img {
        height: 230px
    }
}

@media (width<=620px) {
    .challenge-story figure {
        height: 260px
    }

    .challenge-story img {
        height: 205px;
        padding: 12px 10px 2px
    }

    .diagram-caption {
        grid-template-columns: 1.2fr auto .8fr;
        gap: 6px;
        padding: 0 10px;
        font-size: 8px
    }

    .diagram-caption em {
        font-size: 8px
    }
}

.challenge-gallery {
    align-items: start;
    gap: 30px
}

.challenge-story figure.shape-stage {
    height: 324px;
    box-shadow: none;
    border: 0;
    margin: 0 auto;
    transition: transform .35s, filter .35s;
    position: relative;
    overflow: hidden
}

.challenge-story figure.shape-stage:before,
.challenge-story figure.shape-stage:after {
    display: none
}

.challenge-story:hover figure.shape-stage {
    filter: drop-shadow(0 18px 20px #224b741a);
    transform: translateY(-5px)
}

.shape-data {
    border-radius: 48% 52% 31% 27%/45% 48% 30% 34%;
    width: min(390px, 100%);
    background: #f4d4cc !important
}

.shape-token {
    border-radius: 50%;
    width: min(324px, 100%);
    background: #efe4c9 !important
}

.shape-agent {
    clip-path: polygon(14% 0, 86% 0, 100% 22%, 93% 84%, 50% 100%, 7% 84%, 0 22%);
    width: min(372px, 100%);
    background: #d7ece4 !important
}

.shape-stage .pain-visual {
    transform-origin: 50%;
    background: 0 0;
    border: 0;
    width: auto;
    height: auto;
    margin: 0;
    position: absolute;
    inset: 0;
    overflow: visible;
    transform: scale(.88)
}

.shape-stage .pain-visual:before {
    display: none
}

.shape-stage .pain-visual:after {
    opacity: .56;
    background-size: 28px 28px;
    display: block
}

.shape-stage .boundary-doc {
    background: #fff;
    border-color: #0c1f373d;
    transform: rotate(-4deg);
    box-shadow: 12px 16px #0e264514
}

.shape-stage .boundary-doc i {
    background: #bec7d1
}

.shape-stage .boundary-cloud {
    filter: none;
    background: #132e4a;
    transform: none;
    box-shadow: -24px 15px 0 -7px #132e4a, 22px 15px 0 -6px #132e4a
}

.shape-stage .boundary-path,
.shape-stage .boundary-alert {
    filter: none;
    transform: none
}

.shape-stage .boundary-alert {
    box-shadow: none
}

.shape-stage .token-ring {
    background: conic-gradient(#d48f15 0 78%, #52442824 78%);
    transform: none;
    box-shadow: inset 0 0 0 21px #efe5ca
}

.shape-stage .token-ring:before {
    background: #f8f1df
}

.shape-stage .token-bars,
.shape-stage .token-chip {
    filter: none;
    box-shadow: none;
    transform: none
}

.shape-stage .token-bars i {
    box-shadow: none;
    background: #173653
}

.shape-stage .token-bars i:last-child {
    background: #d48f15
}

.shape-stage .token-chip {
    background: #173653
}

.shape-stage .agent-node {
    background: #fff;
    transform: none;
    box-shadow: 0 8px 18px #12453a1f
}

.shape-stage .agent-node.core {
    box-shadow: none;
    background: #123e35;
    transform: translate(-50%, -50%)
}

.shape-stage .agent-lock {
    box-shadow: none;
    background: #2cb788;
    transform: none
}

.shape-stage .agent-line {
    background: #72a99a
}

.shape-token .token-ring {
    top: 59px;
    left: 28px
}

.shape-token .token-bars {
    bottom: 53px;
    right: 29px
}

.shape-token .token-chip {
    top: 52px;
    right: 26px
}

.shape-agent .agent-node.n1 {
    left: 45px
}

.shape-agent .agent-node.n2 {
    right: 42px
}

.shape-agent .agent-node.n3 {
    right: 67px
}

.story-copy {
    margin-top: 22px
}

@media (width<=980px) {
    .challenge {
        margin-top: -70px;
        padding-top: 148px
    }

    .challenge-story figure.shape-stage {
        height: 300px
    }

    .challenge-story:nth-child(2n) figure.shape-stage {
        order: 2
    }

    .challenge-story:nth-child(2n) .story-copy {
        order: 1
    }

    .shape-data,
    .shape-agent {
        width: min(360px, 100%)
    }

    .shape-token {
        width: min(300px, 100%)
    }
}

@media (width<=620px) {
    .challenge {
        margin-top: -42px;
        padding-top: 105px
    }

    .challenge:before {
        -webkit-mask-image: linear-gradient(#0000 0, #000 42px 100%);
        mask-image: linear-gradient(#0000 0, #000 42px 100%)
    }

    .challenge-story figure.shape-stage {
        height: 276px
    }

    .challenge-story:nth-child(2n) figure.shape-stage,
    .challenge-story:nth-child(2n) .story-copy {
        order: initial
    }

    .shape-data,
    .shape-agent {
        width: min(330px, 100%)
    }

    .shape-token {
        width: min(276px, 100%)
    }

    .shape-stage .pain-visual {
        transform: scale(.8)
    }
}

.shape-stage .direct-visual {
    font-style: normal;
    overflow: hidden;
    transform: none
}

.shape-stage .direct-visual:after,
.shape-stage .direct-visual:before {
    display: none
}

.direct-visual>em {
    z-index: 7;
    color: #53667a;
    white-space: nowrap;
    background: #ffffffb8;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translate(-50%)
}

.data-pack {
    z-index: 3;
    gap: 8px;
    display: grid;
    position: absolute;
    top: 69px;
    left: 34px
}

.data-pack span {
    color: #193552;
    background: #fff;
    border: 1px solid #27486929;
    border-radius: 7px;
    width: 88px;
    padding: 9px 10px;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 5px 6px #243e5812
}

.data-pack span:nth-child(2) {
    color: #fff;
    background: #183854;
    margin-left: 10px
}

.data-pack span:nth-child(3) {
    background: #f9f5ee;
    margin-left: 20px
}

.data-route {
    z-index: 3;
    background: #df554c;
    height: 3px;
    position: absolute;
    top: 136px;
    left: 143px;
    right: 116px
}

.data-route:after {
    content: "";
    border-top: 7px solid #0000;
    border-bottom: 7px solid #0000;
    border-left: 12px solid #df554c;
    position: absolute;
    top: -6px;
    right: -2px
}

.data-route i {
    border-top: 1px dashed #ffffffbf;
    position: absolute;
    top: -4px;
    left: 13px;
    right: 9px
}

.data-route strong {
    color: #a94740;
    white-space: nowrap;
    font-size: 9px;
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translate(-50%)
}

.external-model {
    z-index: 3;
    background: #153451;
    border-radius: 40px;
    width: 91px;
    height: 61px;
    position: absolute;
    top: 86px;
    right: 32px;
    box-shadow: -20px 16px 0 -8px #153451, 19px 16px 0 -7px #153451
}

.external-model b {
    z-index: 2;
    color: #fff;
    white-space: nowrap;
    font-size: 9px;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%)
}

.caller-list {
    z-index: 3;
    gap: 9px;
    display: grid;
    position: absolute;
    top: 58px;
    left: 24px
}

.caller-list span {
    text-align: center;
    color: #25445e;
    background: #fff;
    border-radius: 8px;
    width: 58px;
    padding: 8px 5px;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 6px 14px #354c6014
}

.caller-list span:not(:first-child) {
    color: #fff;
    background: #173653
}

.token-stream {
    z-index: 3;
    width: 75px;
    height: 130px;
    position: absolute;
    top: 65px;
    left: 87px
}

.token-stream:before,
.token-stream:after {
    content: "";
    background: #d38d14;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    transform: rotate(18deg)
}

.token-stream:before {
    top: 20px
}

.token-stream:after {
    bottom: 20px;
    transform: rotate(-18deg)
}

.token-stream i {
    color: #fff;
    background: #e1a225;
    border-radius: 999px;
    padding: 5px 7px;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
    position: absolute
}

.token-stream i:first-child {
    top: 11px;
    left: 9px
}

.token-stream i:nth-child(2) {
    top: 57px;
    left: 31px
}

.token-stream i:last-child {
    bottom: 10px;
    left: 8px
}

.budget-bucket {
    z-index: 3;
    background: #fff;
    border: 3px solid #173653;
    border-top-width: 8px;
    border-radius: 10px 10px 26px 26px;
    width: 119px;
    height: 151px;
    position: absolute;
    top: 57px;
    right: 27px;
    overflow: hidden
}

.budget-bucket:before {
    content: "";
    background: repeating-linear-gradient(0deg, #e0a126 0 13px, #f4c35d 13px 16px);
    height: 76%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.budget-bucket small,
.budget-bucket strong {
    z-index: 2;
    text-align: center;
    display: block;
    position: relative
}

.budget-bucket small {
    color: #516477;
    margin-top: 13px;
    font-size: 8px
}

.budget-bucket strong {
    color: #183653;
    margin-top: 4px;
    font-size: 10px
}

.budget-bucket span {
    z-index: 3;
    border-top: 2px dashed #e24f48;
    position: absolute;
    top: 47px;
    left: -3px;
    right: -3px
}

.budget-bucket b {
    z-index: 4;
    color: #fff;
    background: #e24f48;
    border-radius: 50%;
    place-items: center;
    width: 22px;
    height: 22px;
    font-size: 11px;
    display: grid;
    position: absolute;
    top: 37px;
    right: 5px
}

.governance-item {
    z-index: 3;
    color: #173e52;
    background: #fff;
    border: 1px solid #1c475d24;
    border-radius: 13px;
    place-items: center;
    width: 66px;
    height: 54px;
    font-size: 10px;
    font-weight: 900;
    display: grid;
    position: absolute;
    box-shadow: 0 8px 16px #21524417
}

.account-item {
    top: 55px;
    left: 38px
}

.model-item {
    color: #fff;
    background: #123e35;
    top: 60px;
    right: 40px
}

.permission-item {
    background: #f7fcfa;
    bottom: 65px;
    left: 48px
}

.skill-item {
    color: #fff;
    background: #2cb788;
    bottom: 58px;
    right: 49px
}

.governance-center {
    z-index: 4;
    background: #fff6;
    border: 2px dashed #d85b51;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 92px;
    height: 92px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.governance-center b {
    color: #d85b51;
    font-size: 25px
}

.governance-center small {
    color: #92564f;
    font-size: 8px;
    font-weight: 800
}

.broken-link {
    z-index: 2;
    transform-origin: 0;
    border-top: 2px dashed #d85b51;
    width: 58px;
    position: absolute
}

.link-a {
    top: 100px;
    left: 96px;
    transform: rotate(25deg)
}

.link-b {
    top: 108px;
    right: 93px;
    transform: rotate(153deg)
}

.link-c {
    bottom: 91px;
    left: 102px;
    transform: rotate(-20deg)
}

.challenge {
    margin-top: -110px;
    padding-top: 192px
}

.challenge:before {
    background: linear-gradient(#0000 0%, #f5f9fd57 16%, #f7fafc 36%, #fff 58%, #f7f4ee 100%), linear-gradient(90deg, #cfe0f7 0%, #b2cdf2 50%, #5da5ee 100%);
    -webkit-mask-image: linear-gradient(#0000 0, #000 110px 100%);
    mask-image: linear-gradient(#0000 0, #000 110px 100%)
}

@media (width<=980px) {
    .challenge {
        margin-top: -64px;
        padding-top: 146px
    }

    .challenge:before {
        -webkit-mask-image: linear-gradient(#0000 0, #000 64px 100%);
        mask-image: linear-gradient(#0000 0, #000 64px 100%)
    }
}

@media (width<=620px) {
    .challenge {
        margin-top: -38px;
        padding-top: 100px
    }

    .challenge:before {
        -webkit-mask-image: linear-gradient(#0000 0, #000 38px 100%);
        mask-image: linear-gradient(#0000 0, #000 38px 100%)
    }

    .direct-visual {
        transform-origin: 50% !important;
        transform: scale(.9) !important
    }
}

.challenge-story figure.clean-stage {
    clip-path: none;
    background: #f2f7fc;
    border: 1px solid #2a67a41f;
    border-radius: 44px 44px 22px 22px;
    width: 100%;
    height: 292px;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 17px 42px #214c7917
}

.challenge-story figure.clean-stage:before {
    display: block;
    box-shadow: inset 0 1px #fffffff2
}

.challenge-story figure.clean-stage:after {
    opacity: .5;
    display: block;
    bottom: 0
}

.challenge-story figure.clean-stage img {
    object-fit: cover;
    filter: none;
    width: 100%;
    height: 100%;
    padding: 0;
    display: block;
    transform: none
}

.challenge-story:hover figure.clean-stage img {
    transform: scale(1.025)
}

.challenge-story:hover figure.clean-stage {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px #214c791f
}

.story-data figure.clean-stage {
    background: #eaf2ff
}

.story-token figure.clean-stage {
    background: #fff2dd
}

.story-agent figure.clean-stage {
    background: #e8f6f1
}

@media (width<=980px) {
    .challenge-story figure.clean-stage {
        border-radius: 36px 36px 18px 18px;
        height: 270px
    }

    .challenge-story:nth-child(2n) figure.clean-stage {
        order: 2
    }

    .challenge-story:nth-child(2n) .story-copy {
        order: 1
    }
}

@media (width<=620px) {
    .challenge-story figure.clean-stage {
        border-radius: 28px 28px 16px 16px;
        height: 238px
    }

    .challenge-story:nth-child(2n) figure.clean-stage,
    .challenge-story:nth-child(2n) .story-copy {
        order: initial
    }
}

.challenge-story figure.flat-stage {
    clip-path: none;
    border: 1px solid #2251801a;
    border-radius: 36px 36px 20px 20px;
    width: 100%;
    height: 292px;
    margin: 0;
    transition: transform .35s, box-shadow .35s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 44px #23486f14
}

.challenge-story figure.flat-stage:before {
    content: "";
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(#1e4f800b 1px, #0000 1px), linear-gradient(90deg, #1e4f800b 1px, #0000 1px);
    background-size: 34px 34px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(#000, #0000 78%);
    mask-image: linear-gradient(#000, #0000 78%)
}

.challenge-story figure.flat-stage:after {
    content: "";
    z-index: 1;
    background: linear-gradient(90deg, transparent, var(--story-accent), transparent);
    opacity: .38;
    height: 1px;
    position: absolute;
    bottom: 54px;
    left: 23%;
    right: 23%
}

.challenge-story:hover figure.flat-stage {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px #23486f1f
}

.flat-data {
    background: #edf4ff !important
}

.flat-token {
    background: #fff5df !important
}

.flat-agent {
    background: #eaf8f3 !important
}

.flat-icon-tile {
    z-index: 2;
    background: #ffffff9e;
    border: 1px solid #ffffffe6;
    border-radius: 30px;
    place-items: center;
    width: 264px;
    height: 194px;
    display: grid;
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 10px 30px #204d780f
}

.flat-icon-tile svg {
    width: 238px;
    height: 158px;
    overflow: visible
}

.flat-legend {
    z-index: 3;
    color: #5c7085;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    display: grid;
    position: absolute;
    bottom: 13px;
    left: 18px;
    right: 18px
}

.flat-legend span {
    justify-self: start
}

.flat-legend b {
    color: var(--story-number);
    white-space: nowrap;
    background: #ffffffb8;
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 900
}

.flat-legend em {
    color: #465d73;
    white-space: nowrap;
    justify-self: end;
    font-style: normal
}

.flat-data .file-stack rect {
    fill: #fff;
    stroke: #7facf1;
    stroke-width: 2px
}

.flat-data .file-stack rect:first-child {
    fill: #cfe2ff;
    opacity: .75
}

.flat-data .file-stack path {
    fill: none;
    stroke: #78a6e8;
    stroke-width: 5px;
    stroke-linecap: round
}

.flat-data .boundary-shield {
    fill: #1677ff;
    stroke: #0e61dc;
    stroke-width: 2px;
    filter: drop-shadow(0 8px 10px #1677ff2e)
}

.flat-data .boundary-line {
    fill: none;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-dasharray: 6 7
}

.flat-data .flow-arrow {
    fill: none;
    stroke: #e85b55;
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-linejoin: round
}

.flat-data .outside-cloud {
    fill: #fff;
    stroke: #1677ff;
    stroke-width: 3px
}

.flat-token .caller-nodes circle {
    fill: #173653
}

.flat-token .caller-nodes path {
    fill: none;
    stroke: #fff;
    stroke-width: 3px;
    stroke-linecap: round
}

.flat-token .token-coins circle {
    fill: #e2a221;
    stroke: #c7860e;
    stroke-width: 1.5px
}

.flat-token .token-coins text {
    fill: #fff;
    text-anchor: middle;
    font-size: 10px;
    font-weight: 900
}

.flat-token .meter-route {
    fill: none;
    stroke: #e2a221;
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-dasharray: 4 6
}

.flat-token .cost-meter>path:first-child {
    fill: none;
    stroke: #eadcb8;
    stroke-width: 12px;
    stroke-linecap: round
}

.flat-token .meter-progress {
    fill: none;
    stroke: #e2a221;
    stroke-width: 12px;
    stroke-linecap: round
}

.flat-token .meter-needle {
    fill: none;
    stroke: #173653;
    stroke-width: 5px;
    stroke-linecap: round
}

.flat-token .cost-meter circle,
.flat-token .cost-meter rect {
    fill: #173653
}

.flat-token .cost-meter text {
    fill: #fff;
    text-anchor: middle;
    font-size: 11px;
    font-weight: 900
}

.governance-diagram {
    z-index: 2;
    background: #ffffff9e;
    border: 1px solid #ffffffe6;
    border-radius: 30px;
    width: 264px;
    height: 194px;
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 10px 30px #204d780f
}

.gov-chip {
    z-index: 3;
    color: #17493d;
    background: #fff;
    border: 1px solid #1b685321;
    border-radius: 15px;
    place-items: center;
    width: 67px;
    height: 48px;
    font-size: 10px;
    font-weight: 900;
    display: grid;
    position: absolute;
    box-shadow: 0 7px 18px #19604d14
}

.gov-account {
    top: 23px;
    left: 22px
}

.gov-model {
    color: #fff;
    background: #123f35;
    top: 23px;
    right: 22px
}

.gov-permission {
    background: #effaf6;
    bottom: 22px;
    left: 22px
}

.gov-skill {
    color: #fff;
    background: #26b88f;
    bottom: 22px;
    right: 22px
}

.gov-gap {
    z-index: 4;
    background: #fff9f7;
    border: 2px dashed #e2675c;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 83px;
    height: 83px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 8px #e2675c0b
}

.gov-gap strong {
    color: #df5b52;
    font-size: 24px;
    line-height: 1
}

.gov-gap small {
    color: #9a5b55;
    margin-top: 5px;
    font-size: 8px;
    font-weight: 900
}

.gov-line {
    z-index: 2;
    transform-origin: 0;
    border-top: 2px dashed #77b7a6;
    width: 62px;
    position: absolute
}

.line-1 {
    top: 62px;
    left: 76px;
    transform: rotate(27deg)
}

.line-2 {
    top: 63px;
    right: 72px;
    transform: rotate(153deg)
}

.line-3 {
    bottom: 62px;
    left: 77px;
    transform: rotate(-27deg)
}

.line-4 {
    bottom: 62px;
    right: 71px;
    transform: rotate(207deg)
}

@media (width<=980px) {
    .challenge-story figure.flat-stage {
        border-radius: 32px 32px 18px 18px;
        height: 270px
    }

    .flat-icon-tile,
    .governance-diagram {
        top: 16px;
        transform: translate(-50%)scale(.92)
    }

    .challenge-story:nth-child(2n) figure.flat-stage {
        order: 2
    }

    .challenge-story:nth-child(2n) .story-copy {
        order: 1
    }
}

@media (width<=620px) {
    .challenge-story figure.flat-stage {
        border-radius: 26px 26px 16px 16px;
        height: 244px
    }

    .flat-icon-tile,
    .governance-diagram {
        top: 5px;
        transform: translate(-50%)scale(.82)
    }

    .flat-legend {
        bottom: 9px
    }

    .challenge-story:nth-child(2n) figure.flat-stage,
    .challenge-story:nth-child(2n) .story-copy {
        order: initial
    }
}

.challenge-story figure.generated-3d-stage {
    clip-path: none;
    background: #eef5fc;
    border: 1px solid #26588a1c;
    border-radius: 38px 38px 20px 20px;
    width: 100%;
    height: 292px;
    margin: 0;
    transition: transform .38s, box-shadow .38s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 44px #23486f17
}

.challenge-story figure.generated-3d-stage:before {
    content: "";
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    display: block;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 1px #ffffffeb
}

.challenge-story figure.generated-3d-stage:after {
    display: none
}

.challenge-story figure.generated-3d-stage img {
    object-fit: cover;
    object-position: center;
    filter: none;
    width: 100%;
    height: 100%;
    padding: 0;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1);
    display: block;
    transform: none
}

.challenge-story:hover figure.generated-3d-stage {
    transform: translateY(-4px);
    box-shadow: 0 25px 56px #23486f21
}

.story-data figure.generated-3d-stage {
    background: #eaf2ff
}

.story-token figure.generated-3d-stage {
    background: #fff2dd
}

.story-agent figure.generated-3d-stage {
    background: #e8f6f1
}

@media (width<=980px) {
    .challenge-story figure.generated-3d-stage {
        border-radius: 34px 34px 18px 18px;
        height: 270px
    }

    .challenge-story:nth-child(2n) figure.generated-3d-stage {
        order: 2
    }

    .challenge-story:nth-child(2n) .story-copy {
        order: 1
    }
}

@media (width<=620px) {
    .challenge-story figure.generated-3d-stage {
        border-radius: 28px 28px 16px 16px;
        height: 238px
    }

    .challenge-story:nth-child(2n) figure.generated-3d-stage,
    .challenge-story:nth-child(2n) .story-copy {
        order: initial
    }
}

.challenge {
    --bridge-depth: 110px
}

.challenge:before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--bridge-depth), #000 100%), radial-gradient(ellipse 26% var(--bridge-depth) at 72% 0, transparent 0 72%, #00000059 86%, #000 100%);
    -webkit-mask-composite: source-in;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--bridge-depth), #000 100%), radial-gradient(ellipse 26% var(--bridge-depth) at 72% 0, transparent 0 72%, #00000059 86%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--bridge-depth), #000 100%), radial-gradient(ellipse 26% var(--bridge-depth) at 72% 0, transparent 0 72%, #00000059 86%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--bridge-depth), #000 100%), radial-gradient(ellipse 26% var(--bridge-depth) at 72% 0, transparent 0 72%, #00000059 86%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 var(--bridge-depth), #000 100%), radial-gradient(ellipse 26% var(--bridge-depth) at 72% 0, transparent 0 72%, #00000059 86%, #000 100%);
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    mask-composite: intersect
}

@media (width<=980px) {
    .challenge {
        --bridge-depth: 64px
    }
}

@media (width<=620px) {
    .challenge {
        --bridge-depth: 38px
    }
}

.solution.solution-scene {
    color: #0a2c58;
    background: #092854 url(../enterprise-ai-office-scene.webp) 50% 48%/cover no-repeat;
    min-height: 490px;
    padding: 40px 0;
    position: relative;
    overflow: hidden
}

.solution-scene-shade {
    z-index: 0;
    clip-path: polygon(0 0, 62% 0, 56% 100%, 0 100%);
    background: linear-gradient(135deg, #0876dd 0%, #0062c9 54%, #0053b6 100%);
    position: absolute;
    inset: 0
}

.solution-scene-shade:after {
    content: "";
    background: linear-gradient(135deg, #ffffff21, #0000 42%), radial-gradient(circle at 22% 46%, #4bc0ff33, #0000 32%);
    position: absolute;
    inset: 0
}

.solution-simple {
    z-index: 2;
    width: min(var(--content-width), calc(100% - 80px));
    margin: 0 auto;
    position: relative
}

.solution-intro {
    width: min(720px, 52%);
    max-width: none
}

.solution-intro>span {
    color: #c7ecff;
    letter-spacing: .08em;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex
}

.solution-intro>span:before {
    content: "";
    background: linear-gradient(90deg, #fff, #73d3ff);
    border-radius: 999px;
    width: 34px;
    height: 3px;
    box-shadow: 0 0 16px #5aceff52
}

.solution-intro h2 {
    color: #fff;
    letter-spacing: -.05em;
    text-shadow: 0 8px 28px #0037802e;
    max-width: 680px;
    margin: 14px 0 12px;
    font-size: clamp(38px, 2.65vw, 50px);
    font-weight: 760;
    line-height: 1.1
}

.solution-intro p {
    color: #ebf7ffdb;
    max-width: 650px;
    margin: 0;
    font-size: 14px;
    line-height: 1.58
}

.capability-list.capability-cards {
    background: 0 0;
    border: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: min(720px, 52%);
    margin-top: 18px;
    display: grid
}


.capability-list.capability-cards article {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #f9fcfff5;
    border: 1px solid #ffffffb8;
    border-radius: 14px;
    grid-template-columns: 30px 1fr;
    align-items: start;
    gap: 11px;
    min-height: 88px;
    padding: 13px 15px;
    transition: transform .28s, background .28s, box-shadow .28s;
    display: grid;
    box-shadow: 0 12px 28px #002f6929
}

.capability-list.capability-cards article:hover {
    background: #f7fbff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px #0d467a2e
}

.capability-list.capability-cards article>span {
    color: #0873d8;
    background: #e4f2ff;
    border-radius: 9px;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 14px;
    font-weight: 800;
    display: grid
}

.capability-list.capability-cards article>span svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 19px;
    height: 19px
}

.capability-list.capability-cards article:nth-child(2)>span {
    color: #b8730a;
    background: #fff0cd
}

.capability-list.capability-cards article:nth-child(3)>span {
    color: #087f79;
    background: #dff5f2
}

.capability-list.capability-cards article:nth-child(4)>span {
    color: #445bd2;
    background: #e8ecff
}

.capability-list.capability-cards h3 {
    color: #0b2e59;
    letter-spacing: -.025em;
    margin: 0 0 5px;
    font-size: 18px
}

.capability-list.capability-cards p {
    color: #496985;
    margin: 0;
    font-size: 10px;
    line-height: 1.5
}

@media (width<=1100px) {
    .solution-simple {
        width: calc(100% - 56px)
    }

    .solution-intro,
    .capability-list.capability-cards {
        width: 60%
    }

    .solution-scene-shade {
        clip-path: polygon(0 0, 72% 0, 68% 100%, 0 100%)
    }
}

@media (width<=980px) {
    .solution.solution-scene {
        background-position: 64% 48%;
        min-height: 0;
        padding: 44px 0
    }

    .solution-simple {
        width: calc(100% - 48px)
    }

    .solution-intro,
    .capability-list.capability-cards {
        width: 100%;
        max-width: 720px
    }

    .solution-scene-shade {
        clip-path: none;
        background: linear-gradient(135deg, #0876dd, #0053b6)
    }

    .capability-list.capability-cards article {
        min-height: 88px
    }
}

@media (width<=620px) {
    .solution.solution-scene {
        padding: 38px 0
    }

    .solution-simple {
        width: calc(100% - 36px)
    }

    .solution-intro h2 {
        margin: 13px 0 11px;
        font-size: 32px
    }

    .solution-intro p {
        font-size: 12px
    }

    .capability-list.capability-cards {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 16px
    }

    .capability-list.capability-cards article {
        border-radius: 12px;
        min-height: 0;
        padding: 13px
    }

    .capability-list.capability-cards h3 {
        font-size: 17px
    }
}

.editions {
    padding-top: 62px;
    padding-bottom: 68px
}

.editions .section-heading {
    margin-bottom: 30px
}

.edition-grid {
    gap: 18px
}

.edition-card {
    border-radius: 24px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px 26px;
    min-height: 330px;
    padding: 30px 32px;
    display: grid;
    overflow: hidden;
    box-shadow: 0 22px 58px #1c42681f
}

.edition-label {
    z-index: 3;
    letter-spacing: .24em;
    grid-area: 1/1;
    font-size: 9px;
    position: relative
}

.edition-card h3 {
    z-index: 3;
    letter-spacing: -.045em;
    white-space: nowrap;
    grid-area: 2/1;
    margin: 0;
    font-size: clamp(29px, 2.15vw, 38px);
    line-height: 1.08;
    position: relative
}

.edition-card>p {
    z-index: 3;
    grid-area: 3/1;
    max-width: 430px;
    margin: 0;
    font-size: 14px;
    line-height: 1.68;
    position: relative
}

.edition-card ul {
    z-index: 3;
    border-radius: 17px;
    flex-direction: column;
    grid-area: 2/2/5;
    justify-content: center;
    align-self: stretch;
    margin: 0;
    padding: 18px 17px;
    list-style: none;
    display: flex;
    position: relative
}

.edition-card li {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.5
}

.edition-card li:before {
    border-radius: 6px;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    font-size: 10px;
    display: inline-grid
}

.edition-card>a {
    z-index: 3;
    grid-area: 4/1;
    align-self: end;
    width: max-content;
    font-size: 10px;
    position: relative;
    bottom: auto;
    left: auto
}

.edition-number {
    z-index: 2;
    font-size: 68px;
    line-height: 1;
    top: 18px;
    right: 26px
}

.foundation-card {
    background: linear-gradient(135deg, #fffaf0 0%, #f1eadc 58%, #e5edf6 100%);
    border-color: #5e769124
}

.foundation-card:before {
    content: "";
    border: 1px solid #1c69b224;
    border-radius: 50%;
    width: 310px;
    height: 310px;
    position: absolute;
    bottom: -105px;
    right: 145px;
    box-shadow: 0 0 0 48px #1c69b209, 0 0 0 96px #1c69b206
}

.foundation-card ul {
    background: #ffffffa8;
    border: 1px solid #476f9621
}

.premium-card .edition-label {
    color: #8fdbff
}

.premium-card h3 {
    color: #fff
}

.premium-card>p {
    color: #e2f2ffc7
}

.premium-card ul {
    background: #03255457;
    border: 1px solid #aadcff38
}

.premium-card li {
    color: #e7f4ff
}

.premium-card li:before {
    color: #fff;
    background: #54beff47
}

.edition-orbit {
    z-index: 1;
    border-color: #81d3ff33;
    width: 350px;
    height: 350px;
    top: -110px;
    right: -92px
}

.edition-orbit i {
    border-color: #81d3ff2e
}

.edition-orbit i:nth-child(3) {
    background: #4ec8ff;
    box-shadow: 0 0 34px #4ec8ff8c
}

@media (width<=1100px) {
    .edition-card {
        grid-template-columns: 1fr 190px;
        padding: 28px 26px
    }

    .edition-card h3 {
        font-size: 30px
    }
}

@media (width<=820px) {
    .edition-grid {
        grid-template-columns: 1fr
    }

    .edition-card {
        grid-template-columns: minmax(0, 1fr) 230px;
        min-height: 300px
    }

    .edition-card h3 {
        font-size: 34px
    }
}

@media (width<=620px) {
    .editions {
        padding-top: 48px;
        padding-bottom: 52px
    }

    .editions .section-heading {
        margin-bottom: 24px
    }

    .edition-card {
        border-radius: 19px;
        grid-template-rows: auto auto auto auto auto;
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: 0;
        padding: 24px
    }

    .edition-card h3 {
        grid-area: 2/1;
        font-size: clamp(24px, 7.2vw, 30px)
    }

    .edition-card>p {
        grid-area: 3/1
    }

    .edition-card ul {
        grid-area: 4/1;
        padding: 13px 15px
    }

    .edition-card>a {
        grid-area: 5/1;
        margin-top: 4px
    }

    .edition-number {
        font-size: 58px
    }

    .edition-orbit {
        width: 260px;
        height: 260px
    }
}

.edition-card {
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-columns: 1fr auto;
    gap: 10px 18px;
    min-height: 326px
}

.edition-label {
    grid-area: 1/1;
    align-self: center
}

.edition-number {
    letter-spacing: -.05em;
    grid-area: 1/2;
    place-self: center end;
    font-size: 38px;
    line-height: 1;
    position: relative;
    top: auto;
    right: auto
}

.edition-card h3 {
    grid-area: 2/1/auto/3;
    margin-top: 7px;
    font-size: clamp(31px, 2.25vw, 40px)
}

.edition-card>p {
    grid-area: 3/1/auto/3;
    max-width: 560px
}

.edition-card ul {
    background: 0 0;
    border: 0;
    border-top: 1px solid #3768972b;
    border-radius: 0;
    grid-area: 4/1/auto/3;
    grid-template-columns: 1fr;
    align-self: end;
    gap: 7px;
    margin: 10px 0 0;
    padding: 15px 0 0;
    display: grid
}

.edition-card li {
    white-space: nowrap;
    border-right: 0;
    align-items: center;
    min-height: 24px;
    margin: 0;
    padding: 0;
    display: flex
}

.edition-card li:first-child,
.edition-card li:last-child {
    padding: 0
}

.edition-card>a {
    grid-area: 5/1/auto/3;
    margin-top: 5px
}

.foundation-card:before {
    border-color: #1c6fbe29;
    width: 390px;
    height: 390px;
    bottom: -160px;
    right: -90px;
    box-shadow: 0 0 0 55px #1c6fbe09, 0 0 0 110px #1c6fbe06
}

.foundation-card ul {
    background: 0 0;
    border: 0;
    border-top: 1px solid #3768972b
}

.premium-card ul {
    background: 0 0;
    border: 0;
    border-top: 1px solid #afdcff38
}

.premium-card .edition-number {
    color: #ffffff61
}

.edition-orbit {
    opacity: .78;
    top: -165px;
    right: -135px
}

@media (width<=1100px) {
    .edition-card {
        grid-template-columns: 1fr auto
    }

    .edition-card h3 {
        grid-column: 1/3;
        font-size: 32px
    }

    .edition-card ul {
        grid-column: 1/3
    }
}

@media (width<=820px) {
    .edition-card {
        grid-template-columns: 1fr auto;
        min-height: 300px
    }

    .edition-card h3 {
        font-size: 34px
    }
}

@media (width<=620px) {
    .edition-card {
        grid-template-rows: auto auto auto auto auto;
        grid-template-columns: 1fr auto
    }

    .edition-number {
        grid-area: 1/2;
        font-size: 32px
    }

    .edition-card h3 {
        grid-area: 2/1/auto/3
    }

    .edition-card>p {
        grid-area: 3/1/auto/3
    }

    .edition-card ul {
        grid-area: 4/1/auto/3;
        grid-template-columns: 1fr;
        padding-top: 12px
    }

    .edition-card li {
        border-right: 0;
        padding: 6px 0
    }

    .edition-card>a {
        grid-area: 5/1/auto/3
    }
}

.editions:before {
    background: radial-gradient(circle at 11% 28%, #2d9dd21c, #0000 31%), radial-gradient(circle at 89% 72%, #545bc21c, #0000 32%), linear-gradient(135deg, #f8f9fc 0%, #eef1f7 100%)
}

.foundation-card {
    background: linear-gradient(135deg, #48a9d7 0%, #3189c6 56%, #2675b6 100%);
    border-color: #bee8ff57;
    box-shadow: 0 24px 62px #226a9d38
}

.foundation-card:before {
    border-color: #daf4ff3d;
    box-shadow: 0 0 0 55px #d1f1ff12, 0 0 0 110px #d1f1ff09
}

.foundation-card .edition-label {
    color: #d7f4ff
}

.foundation-card h3 {
    color: #fff
}

.foundation-card>p {
    color: #effaffd6
}

.foundation-card ul {
    border-top-color: #daf4ff47
}

.foundation-card li {
    color: #f2fbff;
    border-right-color: #daf4ff38
}

.foundation-card li:before {
    color: #fff;
    background: #dff7ff33
}

.foundation-card .edition-number {
    color: #ffffff6b
}

.premium-card {
    background: linear-gradient(135deg, #6979cc 0%, #5267bd 54%, #4055ad 100%);
    border-color: #d0d8ff57;
    box-shadow: 0 24px 62px #3c489d3b
}

.premium-card ul {
    border-top-color: #dee4ff47
}

.premium-card li {
    border-right-color: #dee4ff38
}

.edition-card:hover {
    box-shadow: 0 30px 72px #264b823d
}

.edition-card {
    grid-template-rows: auto auto 1fr auto
}

.edition-card h3 {
    grid-area: 1/1;
    align-self: center;
    margin-top: 0
}

.edition-card>p {
    grid-row: 2
}

.edition-card ul {
    grid-row: 3
}

.edition-card>a {
    letter-spacing: .01em;
    background: #fffffff5;
    border: 1px solid #ffffffc7;
    border-radius: 999px;
    grid-row: 4;
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 40px;
    margin-top: 18px;
    padding: 0 17px;
    font-size: 14px;
    font-weight: 850;
    transition: transform .24s, box-shadow .24s, background .24s;
    display: inline-flex;
    box-shadow: 0 8px 22px #17396826
}

.edition-card>a span {
    margin-left: 0;
    font-size: 14px;
    transition: transform .24s
}

.edition-card>a:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px #17396838
}

.edition-card>a:hover span {
    transform: translate(2px, -2px)
}

.foundation-card>a {
    color: #1979af
}

.premium-card>a {
    color: #4b5eb5
}

@media (width<=620px) {
    .edition-card>a {
        min-height: 38px;
        padding: 0 15px
    }
}

.section-heading h2,
.solution-top h2,
.solution-intro h2,
.guide-copy h2,
.consult-copy h2 {
    font-weight: 760
}

.hero-lead,
.section-heading>p,
.story-copy p,
.capability-list.capability-cards p,
.product-copy>p:not(.eyebrow),
.product-copy li,
.experience-copy p,
.guide-copy>p:not(.eyebrow),
.success-state p {
    color: #000 !important
}

.solution-intro p,
.edition-card>p,
.light-heading>p,
.consult-copy>p:not(.eyebrow),
.series-note,
.footer p {
    color: #fff !important
}

.story-copy h3,
.experience-copy h3 {
    color: #000 !important
}

.solution-simple {
    flex-direction: column;
    justify-content: center;
    min-height: 410px;
    display: flex
}

.solution-intro h2 {
    margin-top: 0
}

@media (width<=980px) {
    .solution-simple {
        min-height: 0
    }
}

.product-tabs {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: 0 0;
    border: 0;
    border-radius: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 0;
    display: grid;
    overflow: visible
}

.product-tabs button,
.product-tabs button:last-child {
    opacity: .7;
    background: #02235647;
    border: 1px solid #ffffff2e;
    border-radius: 16px;
    min-height: 76px;
    padding: 14px 20px;
    transition: transform .25s, background .25s, border-color .25s, box-shadow .25s, opacity .25s;
    box-shadow: inset 0 1px #ffffff12
}

.product-tabs button:after {
    display: none
}

.product-tabs button.active {
    opacity: 1;
    background: linear-gradient(135deg, #fff3, #41b1f12e);
    border-color: #8fdbff94;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px #0018463d, inset 0 1px #ffffff2e
}

.product-tabs small {
    color: #82d7ff;
    letter-spacing: .12em;
    font-size: 9px
}

.product-tabs strong {
    margin: 5px 0 2px;
    font-size: 18px;
    line-height: 1.1
}

.product-tabs span {
    color: #fff;
    opacity: .82;
    font-size: 10px
}

.product-detail {
    background: #f3f8fc;
    border: 1px solid #ffffff40;
    border-radius: 28px;
    grid-template-columns: minmax(0, 1.08fr) minmax(470px, .92fr);
    min-height: 480px;
    margin-top: 18px;
    overflow: hidden;
    box-shadow: 0 36px 86px #00184645
}

.product-image-wrap {
    isolation: isolate;
    background: radial-gradient(circle at 50% 45%, #3da8eb33, #0000 34%), linear-gradient(145deg, #f8fcff 0%, #ddecf8 100%);
    min-height: 480px;
    position: relative
}

.product-image-wrap:before {
    content: "";
    background: 0 0;
    border: 1px solid #217cc426;
    border-radius: 50%;
    position: absolute;
    inset: 11% 15% 15%;
    box-shadow: 0 0 0 42px #389de509, 0 0 0 84px #389de506;
    -webkit-mask-image: none;
    mask-image: none
}

.product-image-wrap:after {
    content: "";
    z-index: 1;
    filter: blur(8px);
    background: radial-gradient(#1244703d, #0000 70%);
    border-radius: 50%;
    height: 34px;
    position: absolute;
    bottom: 12%;
    left: 18%;
    right: 18%
}

.product-image-wrap img {
    z-index: 3;
    object-fit: contain;
    filter: drop-shadow(16px 24px 18px #0a2b4e3d);
    width: 58%;
    height: 350px;
    position: relative
}

.product-detail.server .product-image-wrap img {
    width: 68%;
    height: 330px
}

.product-detail.supernode .product-image-wrap img {
    width: 56%;
    height: 370px
}

.product-copy {
    background: linear-gradient(#fff 0%, #f7fbfe 100%);
    flex-direction: column;
    justify-content: center;
    padding: 50px 54px;
    display: flex;
    position: relative
}

.product-copy:before {
    content: "";
    background: linear-gradient(90deg, #0b71d9, #43c6f4);
    border-radius: 999px;
    width: 44px;
    height: 4px;
    margin-bottom: 21px
}

.product-copy h3 {
    color: #071c35;
    letter-spacing: -.04em;
    white-space: nowrap;
    margin: 0 0 9px;
    font-size: clamp(30px, 2.08vw, 39px);
    font-weight: 760;
    line-height: 1.16
}

.product-copy h4 {
    color: #17324e;
    letter-spacing: .01em;
    margin: 1px 0 18px;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.45
}

.product-copy>p:not(.eyebrow) {
    margin: 0;
    font-size: 13px;
    line-height: 1.78;
    color: #000 !important
}

.product-meta {
    gap: 12px;
    margin: 24px 0 17px
}

.product-meta div {
    background: #edf6fc;
    border: 1px solid #d4e5f2;
    border-radius: 15px;
    padding: 15px 17px
}

.product-meta span {
    color: #214d78;
    font-size: 14px
}

.product-meta strong {
    color: #071c35;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45
}

.product-copy ul {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    display: flex
}

.product-copy li {
    background: #f8fcff;
    border: 1px solid #c7ddec;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 10px;
    color: #000 !important
}

.series-note {
    opacity: .88;
    margin-top: 17px;
    color: #fff !important
}

@media (width<=980px) {
    .product-detail {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .product-image-wrap {
        min-height: 360px
    }

    .product-image-wrap img {
        height: 285px
    }

    .product-detail.server .product-image-wrap img {
        width: 65%;
        height: 270px
    }

    .product-detail.supernode .product-image-wrap img {
        width: 50%;
        height: 305px
    }

    .product-copy {
        padding: 40px 42px
    }
}

@media (width<=620px) {
    .product-tabs {
        gap: 7px
    }

    .product-tabs button,
    .product-tabs button:last-child {
        text-align: center;
        border-radius: 12px;
        min-height: 70px;
        padding: 12px 10px
    }

    .product-tabs strong {
        font-size: 15px
    }

    .product-tabs span {
        display: none
    }

    .product-image-wrap {
        min-height: 300px
    }

    .product-image-wrap img {
        width: 52%;
        height: 235px
    }

    .product-detail.server .product-image-wrap img {
        width: 72%;
        height: 220px
    }

    .product-detail.supernode .product-image-wrap img {
        width: 48%;
        height: 245px
    }

    .product-copy {
        padding: 34px 24px
    }

    .product-copy h3 {
        white-space: nowrap;
        font-size: clamp(22px, 6.4vw, 27px)
    }

    .product-meta {
        grid-template-columns: 1fr
    }
}

.experience .experience-copy h3 {
    white-space: nowrap;
    letter-spacing: -.035em;
    max-width: none;
    font-size: clamp(12px, 1.52vw, 22px)
}

@media (width<=620px) {
    .experience .experience-copy h3 {
        font-size: clamp(11px, 3.1vw, 14px)
    }
}

.experience .video-badge {
    z-index: 4;
    color: #fff;
    letter-spacing: .055em;
    text-transform: uppercase;
    box-shadow: none;
    text-shadow: 0 1px 5px #00245b40;
    background: 0 0;
    border: 1px solid #ffffff57;
    border-radius: 999px;
    padding: 9px 14px;
    font-family: Georgia, Times New Roman, serif;
    font-size: clamp(11px, .9vw, 17px);
    font-weight: 400;
    line-height: 1;
    position: absolute;
    top: clamp(14px, 1.35vw, 26px);
    left: clamp(16px, 1.55vw, 30px)
}

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

.video-cover,
.product-tabs button {
    -webkit-tap-highlight-color: transparent
}

.video-dialog {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

@supports not (aspect-ratio:16/9) {
    .experience-screen.video-cover {
        height: auto
    }

    .experience-screen.video-cover:after {
        content: "";
        padding-top: 56.25%;
        display: block
    }

    .experience-screen.video-cover>img,
    .experience-screen.video-cover>.video-shade {
        position: absolute;
        inset: 0
    }

    .experience-screen.video-cover>.play-button {
        position: absolute
    }
}

@media (width<=1279px) {
    :root {
        --content-width: calc(100vw - 64px)
    }

    .section {
        width: calc(100% - 64px)
    }

    .experience-grid {
        gap: 18px
    }

    .experience-copy h3 {
        white-space: normal !important
    }

    .product-copy h3 {
        white-space: normal
    }
}

@media (width<=980px) {
    :root {
        --content-width: calc(100vw - 48px)
    }

    .section {
        width: calc(100% - 48px)
    }

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

    .experience-screen.video-cover {
        aspect-ratio: 16/9
    }

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

    .product-detail {
        grid-template-columns: 1fr
    }

    .guide-strip {
        grid-template-columns: auto 1fr
    }

    .guide-button {
        grid-column: 2
    }
}

@media (width<=620px) {
    :root {
        --content-width: calc(100vw - 32px)
    }

    .section {
        width: calc(100% - 32px)
    }

    .section-heading h2 {
        font-size: clamp(28px, 8.6vw, 34px)
    }

    .section-heading>p {
        font-size: 13px
    }

    .experience .video-badge {
        padding: 7px 11px;
        font-size: 11px;
        top: 12px;
        left: 12px
    }

    .product-tabs button {
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px
    }

    .product-tabs strong {
        font-size: 16px
    }

    .product-copy,
    .experience-copy {
        padding-left: 20px;
        padding-right: 20px
    }

    .experience-copy h3 {
        line-height: 1.4;
        font-size: clamp(17px, 5vw, 21px) !important
    }

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

    .guide-badge {
        justify-self: start
    }

    .guide-button {
        grid-column: 1;
        width: 100%
    }
}

.guide {
    background: linear-gradient(#f4f7fb, #fff);
    min-height: 0;
    padding: 58px max(40px, 50vw - 715px);
    display: block
}

.guide-strip {
    background: linear-gradient(115deg, #f8fbff 0%, #edf6ff 66%, #f5faff 100%);
    border: 1px solid #d5e4f2;
    border-radius: 24px;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    min-height: 196px;
    padding: 32px 42px;
    display: grid;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 48px #1a528714
}

.guide-strip:before {
    content: "";
    pointer-events: none;
    border: 1px solid #2584dd17;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    position: absolute;
    top: -95px;
    right: 13%;
    box-shadow: 0 0 0 38px #2584dd06, 0 0 0 76px #2584dd05
}

.guide-badge {
    z-index: 1;
    color: #fff;
    background: linear-gradient(145deg, #087cf0, #075bd0);
    border-radius: 22px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 92px;
    height: 92px;
    display: flex;
    position: relative;
    box-shadow: 0 16px 34px #0865d540
}

.guide-badge strong {
    font-size: 36px;
    font-weight: 780;
    line-height: 1
}

.guide-badge span {
    letter-spacing: .13em;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 750
}

.guide-copy {
    z-index: 1;
    text-align: left;
    background: 0 0;
    padding: 0;
    position: relative
}

.guide-kicker {
    color: #0870d7;
    letter-spacing: .08em;
    margin-bottom: 10px;
    font-weight: 800;
    display: block
}

.guide-copy h2 {
    color: #09294f;
    letter-spacing: -.045em;
    margin: 0;
    font-size: clamp(30px, 2.15vw, 41px);
    font-weight: 740;
    line-height: 1.16
}

.guide-copy p,
.guide-copy>p:not(.eyebrow) {
    max-width: none;
    margin: 13px 0 0;
    line-height: 1.7;
    color: #526d88 !important
}

.guide-button {
    z-index: 1;
    color: #fff;
    background: linear-gradient(135deg, #0877ea, #075dcc);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-width: 188px;
    height: 54px;
    padding: 0 21px;
    font-weight: 800;
    transition: transform .24s, box-shadow .24s;
    display: inline-flex;
    position: relative;
    box-shadow: 0 13px 30px #0764d333
}

.guide-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px #0764d347
}

.guide-button span {
    font-size: 15px
}

@media (width<=980px) {
    .guide {
        padding: 46px 24px
    }

    .guide-strip {
        grid-template-columns: 88px 1fr;
        gap: 24px;
        padding: 30px
    }

    .guide-badge {
        width: 82px;
        height: 82px
    }

    .guide-button {
        grid-column: 2;
        justify-self: start;
        margin-top: -4px
    }
}

@media (width<=620px) {
    .guide {
        padding: 38px 18px
    }

    .guide-strip {
        border-radius: 18px;
        grid-template-columns: 64px 1fr;
        gap: 18px;
        min-height: 0;
        padding: 26px 22px
    }

    .guide-badge {
        border-radius: 16px;
        width: 64px;
        height: 64px
    }

    .guide-badge strong {
        font-size: 27px
    }

    .guide-badge span {
        margin-top: 5px;
        font-size: 8px
    }

    .guide-kicker {
        margin-bottom: 7px;
        font-size: 9px
    }

    .guide-copy h2 {
        font-size: clamp(22px, 6.1vw, 28px)
    }

    .guide-copy p,
    .guide-copy>p:not(.eyebrow) {
        grid-column: 1/3;
        font-size: 11px
    }

    .guide-button {
        grid-column: 1/3;
        width: 100%;
        min-width: 0;
        margin-top: 2px
    }
}

.guide-strip {
    grid-template-columns: 92px minmax(0, 1fr) 200px;
    grid-template-areas: "badge content action";
    gap: 14px 32px;
    min-height: 184px;
    padding: 28px 38px
}

.guide-strip:before {
    width: 190px;
    height: 190px;
    top: -74px;
    right: 24%;
    box-shadow: 0 0 0 30px #2584dd06, 0 0 0 60px #2584dd04
}

.guide-badge {
    border-radius: 19px;
    order: 0;
    grid-area: badge;
    justify-self: center;
    width: 78px;
    height: 78px
}

.guide-badge strong {
    font-size: 32px
}

.guide-badge span {
    margin-top: 6px;
    font-size: 9px
}

.guide-copy {
    grid-area: content;
    align-self: center;
    text-align: left !important;
    order: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important
}

.guide-copy h2 {
    white-space: nowrap;
    max-width: none;
    font-size: clamp(29px, 2vw, 38px);
    margin: 0 !important
}

.guide-copy p,
.guide-copy>p:not(.eyebrow) {
    max-width: none !important;
    margin: 11px 0 0 !important
}

.guide-button {
    white-space: nowrap;
    order: 0;
    grid-area: action/auto;
    justify-self: end;
    margin: 0
}

@media (width<=1100px) {
    .guide-strip {
        grid-template-columns: 80px minmax(0, 1fr) 180px;
        column-gap: 24px;
        padding: 26px 30px
    }

    .guide-copy h2 {
        font-size: 29px
    }

    .guide-button {
        min-width: 174px
    }
}

@media (width<=980px) {
    .guide-strip {
        grid-template-columns: 76px minmax(0, 1fr);
        grid-template-areas: "badge content""badge action";
        padding: 26px 28px
    }

    .guide-badge {
        width: 72px;
        height: 72px
    }

    .guide-copy h2 {
        white-space: normal;
        font-size: 28px
    }

    .guide-button {
        grid-area: action;
        justify-self: start;
        height: 48px
    }
}

@media (width<=620px) {
    .guide-strip {
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-areas: "badge content""action action";
        column-gap: 15px;
        padding: 22px 20px
    }

    .guide-badge {
        border-radius: 15px;
        width: 58px;
        height: 58px
    }

    .guide-badge strong {
        font-size: 25px
    }

    .guide-copy h2 {
        font-size: 22px
    }

    .guide-copy p,
    .guide-copy>p:not(.eyebrow) {
        font-size: 10px
    }

    .guide-button {
        justify-self: stretch;
        width: 100%
    }
}

.challenge {
    margin-top: -110px;
    padding-top: 236px;
    padding-bottom: 94px
}

.challenge-heading {
    margin-bottom: 36px !important
}

.challenge-heading h2 {
    font-size: clamp(36px, 2.65vw, 48px)
}

.challenge-heading>p:last-child {
    max-width: 820px;
    margin-top: 14px !important;
    line-height: 1.7 !important
}

.challenge-gallery {
    gap: 18px
}

.challenge-story {
    background: #ffffffb8;
    border: 1px solid #26588a1c;
    border-radius: 20px;
    grid-template-columns: 44% 1fr;
    align-items: center;
    min-height: 158px;
    display: grid;
    overflow: hidden;
    box-shadow: 0 12px 30px #23486f12
}

.challenge-story figure.generated-3d-stage {
    width: 100%;
    height: 100%;
    box-shadow: none;
    border: 0;
    border-radius: 0
}

.challenge-story:hover figure.generated-3d-stage {
    box-shadow: none;
    transform: none
}

.challenge-story:hover figure.generated-3d-stage img {
    transform: scale(1.035)
}

.story-copy {
    height: 100%;
    margin: 0;
    padding: 22px 20px;
    display: block
}

.story-copy:before {
    display: none
}

.story-copy>span {
    color: var(--story-accent);
    -webkit-text-stroke: 0;
    letter-spacing: .08em;
    padding: 0 0 9px;
    font-size: 12px;
    font-weight: 800;
    display: block
}

.story-copy>div {
    padding: 0
}

.story-copy h3 {
    margin-bottom: 7px;
    font-size: 20px
}

.story-copy p {
    line-height: 1.62
}

.guide-strip {
    grid-template-columns: minmax(0, 1fr) 200px;
    grid-template-areas: "content action";
    min-height: 156px;
    padding: 26px 38px
}

.guide-copy h2 {
    font-size: clamp(27px, 1.8vw, 34px)
}

@media (width<=980px) {
    .challenge {
        margin-top: -64px;
        padding-top: 152px
    }

    .challenge-story {
        grid-template-columns: 220px 1fr
    }

    .challenge-story:nth-child(2n) figure.generated-3d-stage,
    .challenge-story:nth-child(2n) .story-copy {
        order: initial
    }

    .guide-strip {
        grid-template-columns: 1fr 180px;
        grid-template-areas: "content action"
    }
}

@media (width<=620px) {
    .challenge {
        margin-top: -38px;
        padding-top: 126px;
        padding-bottom: 68px
    }

    .challenge-heading {
        margin-bottom: 28px !important
    }

    .challenge-story {
        grid-template-columns: 112px 1fr;
        min-height: 132px
    }

    .challenge-story figure.generated-3d-stage {
        border-radius: 0;
        height: 132px
    }

    .story-copy {
        padding: 17px 14px
    }

    .story-copy h3 {
        font-size: 18px
    }

    .story-copy p {
        font-size: 10px
    }

    .guide-strip {
        grid-template-columns: 1fr;
        grid-template-areas: "content""action"
    }

    .guide-button {
        grid-area: action
    }
}

.consult.consult-trial {
    background: radial-gradient(circle at 50% 110%, #1c8be747, #0000 44%), linear-gradient(135deg, #061f48 0%, #073b78 56%, #075eb5 100%);
    grid-template-columns: 1fr;
    place-items: center;
    min-height: 430px;
    padding: 86px max(40px, 50vw - 715px);
    display: grid;
    position: relative;
    overflow: hidden
}

.consult.consult-trial:before {
    content: "";
    pointer-events: none;
    border: 1px solid #78d3ff1c;
    border-radius: 50%;
    width: 680px;
    height: 680px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 80px #5ec7ff06, 0 0 0 160px #5ec7ff04
}

.consult-trial .consult-copy {
    z-index: 1;
    text-align: center;
    max-width: 980px;
    position: relative;
    margin: 0 !important
}

.consult-trial .consult-copy h2 {
    color: #fff;
    max-width: none;
    margin: 0;
    font-size: clamp(42px, 3.25vw, 60px)
}

.consult-trial .consult-copy>p:not(.eyebrow) {
    max-width: 700px;
    margin: 22px auto 0;
    font-size: 14px;
    line-height: 1.8;
    color: #e5f2ffd1 !important
}

.trial-button {
    color: #0756bb;
    background: #fff;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 28px;
    min-width: 194px;
    height: 56px;
    margin: 34px auto 0;
    padding: 0 24px;
    font-size: 13px;
    font-weight: 850;
    transition: transform .24s, box-shadow .24s;
    display: inline-flex;
    box-shadow: 0 18px 42px #00143d3d
}

.trial-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 50px #00143d52
}

.trial-button span {
    font-size: 16px
}

.floating-consult {
    color: #fff;
    background: linear-gradient(135deg, #0879eb, #0757c4);
    box-shadow: 0 14px 34px #003f9747
}

@media (width<=620px) {
    .consult.consult-trial {
        min-height: 360px;
        padding: 68px 24px
    }

    .consult-trial .consult-copy h2 {
        font-size: 34px
    }

    .consult-trial .consult-copy>p:not(.eyebrow) {
        font-size: 12px
    }

    .trial-button {
        width: 100%;
        max-width: 300px
    }
}

.trial-button {
    gap: 0
}

.floating-consult {
    gap: 12px;
    padding-left: 20px;
    padding-right: 20px
}

.consult.consult-trial {
    min-height: 370px;
    padding-top: 66px;
    padding-bottom: 66px
}

.consult-trial .consult-copy>p:not(.eyebrow) {
    margin-top: 16px
}

.trial-button {
    height: 52px;
    margin-top: 26px
}

@media (width<=620px) {
    .consult.consult-trial {
        min-height: 320px;
        padding-top: 54px;
        padding-bottom: 54px
    }

    .trial-button {
        margin-top: 22px
    }
}

.experience .video-badge {
    z-index: 4;
    color: #fff;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-shadow: 0 1px 5px #00184373;
    -webkit-backdrop-filter: blur(8px)saturate(125%);
    backdrop-filter: blur(8px)saturate(125%);
    background: linear-gradient(135deg, #03224e80, #075ba347);
    border: 1px solid #ffffff4d;
    border-radius: 9px;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    padding: 0 13px 0 11px;
    font-family: Inter, PingFang SC, Microsoft YaHei, Arial, sans-serif;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    display: inline-flex;
    position: absolute;
    top: 22px;
    left: 22px;
    box-shadow: inset 0 1px #ffffff1f, 0 8px 24px #00245c24
}

.experience .video-badge:before {
    content: "";
    background: #65dcff;
    border-radius: 50%;
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 3px #65dcff21, 0 0 10px #65dcffbf
}

@supports not ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))) {
    .experience .video-badge {
        background: #033367c7
    }
}

@media (width<=620px) {
    .experience .video-badge {
        border-radius: 8px;
        gap: 7px;
        min-height: 28px;
        padding: 0 10px 0 9px;
        font-size: 9px;
        top: 12px;
        left: 12px
    }

    .experience .video-badge:before {
        flex-basis: 4px;
        width: 4px;
        height: 4px
    }
}

.experience .video-badge {
    color: #ffffffd1;
    letter-spacing: .1em;
    text-shadow: 0 1px 3px #001f4c33;
    min-height: 0;
    box-shadow: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #052d5e1f;
    border: 1px solid #ffffff1f;
    border-radius: 6px;
    gap: 0;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 600;
    top: 20px;
    left: 20px
}

@supports not ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))) {
    .experience .video-badge {
        background: #052d5e38
    }
}

@media (width<=620px) {
    .experience .video-badge {
        border-radius: 5px;
        min-height: 0;
        padding: 6px 8px;
        font-size: 9px;
        top: 11px;
        left: 11px
    }
}

.experience .video-badge {
    color: #ffffffe6;
    letter-spacing: .18em;
    text-shadow: 0 1px 4px #00204e3d;
    min-height: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: 0 0;
    border: 0;
    border-radius: 0;
    padding: 0 0 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    display: block;
    top: 24px;
    left: 26px
}

.experience .video-badge:before {
    display: none
}

.experience .video-badge:after {
    content: "";
    background: #ffffff94;
    width: 24px;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0
}

@media (width<=620px) {
    .experience .video-badge {
        letter-spacing: .15em;
        padding: 0 0 8px;
        font-size: 10px;
        font-weight: 400;
        top: 15px;
        left: 16px
    }

    .experience .video-badge:after {
        width: 20px
    }
}

.experience .video-badge {
    color: #123f73;
    letter-spacing: .14em;
    min-height: 31px;
    text-shadow: none;
    -webkit-backdrop-filter: blur(8px)saturate(115%);
    backdrop-filter: blur(8px)saturate(115%);
    background: linear-gradient(135deg, #ffffffe6, #ebf6ffd1);
    border: 1px solid #ffffffb8;
    border-radius: 8px;
    align-items: center;
    padding: 0 12px 0 11px;
    font-size: 10px;
    font-weight: 400;
    display: inline-flex;
    top: 20px;
    left: 20px;
    box-shadow: 0 7px 20px #042a5b24, inset 0 1px #ffffffd1
}

.experience .video-badge:before {
    content: "";
    background: #2f8ed8;
    border-radius: 50%;
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    margin-right: 8px;
    display: block;
    box-shadow: 0 0 0 3px #2f8ed81c, 0 0 8px #2f8ed86b
}

.experience .video-badge:after {
    display: none
}

@supports not ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))) {
    .experience .video-badge {
        background: #f5fafff0
    }
}

@media (width<=620px) {
    .experience .video-badge {
        letter-spacing: .12em;
        min-height: 27px;
        padding: 0 9px 0 8px;
        font-size: 9px;
        top: 12px;
        left: 12px
    }

    .experience .video-badge:before {
        flex-basis: 4px;
        width: 4px;
        height: 4px;
        margin-right: 7px
    }
}

.section,
.solution-simple,
.products-inner {
    width: min(1380px, 100% - 96px)
}

.section-heading>p,
.solution-intro>p {
    font-size: 15px
}

.capability-list.capability-cards h3 {
    font-size: 22px
}

.capability-list.capability-cards p {
    font-size: 14px
}

.experience-copy>span,
.product-tabs small,
.product-tabs span {
    font-size: 14px
}

.experience-copy p,
.product-copy>p:not(.eyebrow) {
    font-size: 14px
}

.trial-button {
    min-width: 176px;
    height: 48px;
    padding: 0 22px;
    font-size: 14px
}

.floating-consult {
    gap: 9px;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    font-size: 11px;
    bottom: 18px;
    right: 18px
}

@media (width<=1279px) {

    .section,
    .solution-simple,
    .products-inner {
        width: calc(100% - 64px)
    }
}

@media (width<=980px) {

    .section,
    .solution-simple,
    .products-inner {
        width: calc(100% - 48px)
    }

    .product-detail,
    .experience-grid {
        grid-template-columns: 1fr
    }
}

@media (width<=620px) {

    .section,
    .solution-simple,
    .products-inner {
        width: calc(100% - 32px)
    }

    .floating-consult {
        height: 38px;
        padding: 0 14px;
        font-size: 10px;
        bottom: 12px;
        right: 12px
    }
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%
}


.section,
.solution-simple,
.products-inner {
    width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
    margin-left: auto;
    margin-right: auto
}

.solution.solution-scene,
.guide,
.consult.consult-trial {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter)
}

.section-heading h2,
.solution-intro h2,
.guide-copy h2,
.consult-copy h2 {
    line-height: 1.2
}

.section-heading>p,
.solution-intro>p,
.guide-copy p,
.consult-copy>p:not(.eyebrow) {
    line-height: 1.75
}

.floating-consult {
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: max-content;
    min-width: 112px;
    max-width: calc(100vw - 36px);
    line-height: 1;
    display: inline-flex
}

.floating-consult span {
    flex: none
}

@media (width<=1279px) {
    :root {
        --page-gutter: 32px
    }
}

@media (width<=980px) {
    :root {
        --page-gutter: 24px
    }

    .section-heading h2 {
        font-size: clamp(30px, 5.2vw, 42px)
    }

    .challenge-gallery {
        gap: 24px
    }

    .edition-grid,
    .experience-grid {
        gap: 20px
    }
}

@media (width<=620px) {
    :root {
        --page-gutter: 16px
    }

    .section-heading h2 {
        font-size: clamp(28px, 8.2vw, 34px)
    }

    .section-heading>p,
    .solution-intro>p {
        font-size: 13px
    }

    .floating-consult {
        min-width: 104px;
        max-width: calc(100vw - 24px);
        padding-left: 14px;
        padding-right: 14px;
        font-size: 11px
    }
}

:root {
    --content-width: 1440px;
    --page-gutter: max(40px, env(safe-area-inset-left))
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden
}

body {
    -webkit-overflow-scrolling: touch
}

main {
    width: 100%
}

img,
video {
    display: block
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

.section,
.solution-simple,
.products-inner,
.guide-strip {
    max-width: var(--content-width)
}

.product-tabs button {
    min-width: 0
}

.floating-consult {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    color: #fff;
    letter-spacing: 0;
    appearance: none;
    background: #0872df;
    border: 0;
    border-radius: 999px;
    gap: 15px;
    width: 152px;
    min-width: 152px;
    height: 66px;
    min-height: 66px;
    padding: 0 24px;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 12px 28px #0046a042
}

.floating-consult span {
    font-size: 18px;
    line-height: 1;
    transform: translateY(-1px)
}

.floating-consult:focus-visible,
.trial-button:focus-visible,
.guide-button:focus-visible,
.product-tabs button:focus-visible,
.experience-screen:focus-visible {
    outline-offset: 3px;
    outline: 3px solid #68d9ff
}

@supports not (width:max(1px, 2px)) {
    .hero {
        padding-left: 40px;
        padding-right: 40px
    }

    .floating-consult {
        bottom: 18px;
        right: 18px
    }
}

@media (width<=1279px) {
    :root {
        --page-gutter: max(32px, env(safe-area-inset-left))
    }

    .hero {
        background-position: 56%
    }
}

@media (width<=980px) {
    :root {
        --page-gutter: max(24px, env(safe-area-inset-left))
    }

    .hero {
        background-position: 61%;
        height: clamp(560px, 76vw, 720px);
        min-height: 560px
    }

    .hero-copy {
        width: 520px;
        max-width: 52%
    }

    .product-tabs {
        gap: 8px
    }

    .floating-consult {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom))
    }
}

@media (width<=620px) {
    :root {
        --page-gutter: max(16px, env(safe-area-inset-left))
    }

    .hero {
        background-position: 64%;
        align-items: flex-start;
        height: 620px;
        min-height: 620px;
        padding-top: 70px
    }

    .hero-copy {
        width: 100%;
        max-width: 78%;
        padding: 0
    }

    .hero h1 {
        white-space: normal;
        letter-spacing: -.045em;
        font-size: clamp(31px, 9.6vw, 42px)
    }

    .hero-slogan {
        margin-top: 12px;
        font-size: clamp(21px, 6.5vw, 28px)
    }

    .hero-rule {
        margin: 18px 0 15px
    }

    .hero-lead {
        margin-top: 0;
        font-size: 12px;
        line-height: 1.7
    }

    .product-tabs button,
    .product-tabs button:last-child {
        padding-left: 6px;
        padding-right: 6px
    }

    .floating-consult {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        gap: 13px;
        width: 136px;
        min-width: 136px;
        height: 58px;
        min-height: 58px;
        padding: 0 20px;
        font-size: 15px
    }

    .floating-consult span {
        font-size: 16px
    }
}

@media (width<=380px) {
    .hero {
        background-position: 66%;
        height: 580px;
        min-height: 580px
    }

    .hero-copy {
        max-width: 84%
    }

    .product-tabs strong {
        font-size: 14px
    }
}

@media (hover:hover) and (pointer:fine) {
    .floating-consult {
        transition: transform .2s, box-shadow .2s
    }

    .floating-consult:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 38px #003f9761
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    :before,
    :after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}

@supports ((-moz-appearance:none)) {

    .section,
    .solution-simple,
    .products-inner {
        max-width: 1440px
    }

    .floating-consult {
        background-image: none
    }
}

@supports not (gap:1rem) {
    .product-tabs>*+* {
        margin-left: 8px
    }

    .floating-consult span {
        margin-left: 15px
    }
}

:root {
    --content-width: 1430.02px;
    --content-ratio: 85.652%
}

.section,
.solution-simple,
.products-inner,
.guide-strip {
    width: 85.652% !important;
    max-width: 1430.02px !important;
    margin-left: auto !important;
    margin-right: auto !important
}

.hero {
    padding-left: max(7.174vw, 50vw - 715.008px);
    padding-right: max(7.174vw, 50vw - 715.008px)
}

.solution.solution-scene,
.products,
.guide,
.consult.consult-trial {
    padding-left: 0;
    padding-right: 0
}

.floating-consult {
    border-radius: 999px;
    gap: 9px;
    width: auto;
    min-width: 112px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 24px #003f973d
}

.floating-consult span {
    margin-left: 0;
    font-size: 13px;
    transform: none
}

@supports not (width:max(1px, 2px)) {
    .hero {
        padding-left: 7.174%;
        padding-right: 7.174%
    }
}

@media (width<=960px) {

    .section,
    .solution-simple,
    .products-inner,
    .guide-strip {
        width: 92% !important
    }

    .hero {
        padding-left: 4%;
        padding-right: 4%
    }
}

@media (width<=620px) {
    .floating-consult {
        gap: 8px;
        width: auto;
        min-width: 104px;
        height: 38px;
        min-height: 38px;
        padding: 0 14px;
        font-size: 10px
    }

    .floating-consult span {
        font-size: 12px
    }
}

@supports ((-moz-appearance:none)) {

    .section,
    .solution-simple,
    .products-inner,
    .guide-strip {
        width: 85.652% !important;
        max-width: 1430.02px !important
    }

    @media (width<=960px) {

        .section,
        .solution-simple,
        .products-inner,
        .guide-strip {
            width: 92% !important
        }
    }
}

@media (width<=620px) {
    .hero {
        background-color: #eef7ff;
        background-position: 67% 100%;
        background-repeat: no-repeat;
        background-size: auto 430px;
        height: 700px;
        min-height: 700px;
        padding-top: 58px
    }

    .hero:after {
        content: "";
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(#f7fbff 0%, #f7fbfff7 39%, #f7fbff1f 67%, #0000 100%);
        display: block;
        position: absolute;
        inset: 0
    }

    .hero-copy {
        z-index: 2;
        width: 100%;
        max-width: 100%
    }

    .hero h1 {
        max-width: 340px;
        font-size: clamp(30px, 9vw, 38px)
    }

    .hero-lead {
        color: #536b85;
        max-width: 330px
    }

    .challenge-gallery {
        gap: 22px
    }

    .challenge-story {
        border-radius: 20px;
        min-height: 0;
        display: block
    }

    .challenge-story figure.generated-3d-stage {
        border-radius: 0;
        width: 100%;
        height: 238px
    }

    .story-copy {
        grid-template-columns: 38px 1fr;
        gap: 10px;
        height: auto;
        min-height: 112px;
        padding: 18px 20px 20px;
        display: grid
    }

    .story-copy>span {
        padding-top: 3px;
        font-size: 12px
    }

    .story-copy>div {
        min-width: 0
    }

    .story-copy h3 {
        margin-bottom: 6px;
        font-size: 20px
    }

    .story-copy p {
        max-width: none;
        font-size: 12px;
        line-height: 1.65
    }

    .solution.solution-scene {
        background-position: 70%;
        background-size: auto 100%;
        min-height: 720px;
        padding-top: 52px;
        padding-bottom: 48px
    }

    .solution-scene-shade {
        clip-path: none;
        background: linear-gradient(#0053b6f5 0%, #0053b6d1 48%, #002d7094 100%)
    }

    .solution-scene-shade:after {
        background: linear-gradient(#ffffff1a, #0000 40%)
    }

    .solution-simple {
        justify-content: flex-start
    }

    .solution-intro {
        padding-right: 8px
    }

    .capability-list.capability-cards article {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background: #03357aad;
        border-color: #8edbff66
    }
}

.solution-mobile-scene {
    display: none
}

.story-data figure.generated-3d-stage img {
    transform: scale(1.14)
}

.story-data:hover figure.generated-3d-stage img {
    transform: scale(1.18)
}

@media (width<=620px) {
    .hero {
        background-color: #dcecff;
        background-image: url(../mobile-hero-ai-work.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: auto 520px;
        height: 720px;
        min-height: 720px;
        padding-top: 52px
    }

    .hero:after {
        background: linear-gradient(#eff7ff 0%, #eff7fffa 26%, #eff7ffb8 39%, #eff7ff00 57%)
    }

    .hero-copy {
        text-shadow: 0 1px #ffffffa6;
        max-width: 100%
    }

    .hero h1 {
        max-width: none;
        font-size: clamp(31px, 9.2vw, 39px)
    }

    .hero-lead {
        color: #34506e;
        max-width: 350px;
        font-size: 12.5px
    }

    .story-data figure.generated-3d-stage img {
        transform-origin: 50% 56%;
        transform: scale(1.23)
    }

    .story-data:hover figure.generated-3d-stage img {
        transform: scale(1.23)
    }

    .solution.solution-scene {
        background: #0768c9;
        min-height: 0;
        padding: 48px 0 0;
        overflow: hidden
    }

    .solution-scene-shade {
        background: linear-gradient(145deg, #0b78dd 0%, #0759b8 100%)
    }

    .solution-simple {
        padding-bottom: 0
    }

    .solution-intro h2,
    .solution-intro p {
        color: #fff
    }

    .solution-intro p {
        color: #ffffffd1
    }

    .capability-list.capability-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 24px
    }

    .capability-list.capability-cards article {
        background: #03306f94;
        border: 1px solid #9ce1ff61;
        min-height: 150px;
        padding: 15px 13px;
        display: block;
        box-shadow: 0 12px 26px #00225b29
    }

    .capability-list.capability-cards article>span {
        width: 38px;
        height: 38px;
        margin-bottom: 12px
    }

    .capability-list.capability-cards h3 {
        color: #fff;
        margin: 0 0 7px;
        font-size: 17px
    }

    .capability-list.capability-cards p {
        color: #ffffffc7;
        margin: 0;
        font-size: 11px;
        line-height: 1.55
    }

    .capability-list.capability-cards svg {
        stroke: #62dcff
    }

    .solution-mobile-scene {
        z-index: 2;
        object-fit: cover;
        object-position: 60% center;
        border-radius: 22px 22px 0 0;
        width: 108.7%;
        max-width: none;
        height: 280px;
        margin: 30px -4.35% 0;
        display: block;
        position: relative;
        box-shadow: 0 -14px 36px #00265c3d
    }
}

@media (width<=1279px) {
    .hero {
        background: linear-gradient(#c7ddf8 0%, #b8d3f5 54%, #a6c6f0 100%);
        flex-direction: column;
        align-items: stretch;
        height: auto;
        min-height: 0;
        padding: clamp(34px, 8vw, 54px) 0 0;
        display: flex
    }

    .hero:after {
        display: none
    }

    .hero-copy {
        width: calc(100% - 48px);
        max-width: none;
        text-shadow: none;
        margin: 0 auto;
        padding: 0 0 16px
    }

    .hero h1 {
        white-space: normal;
        letter-spacing: -.045em;
        max-width: none;
        font-size: clamp(34px, 8.8vw, 48px);
        line-height: 1.08
    }

    .hero-slogan {
        letter-spacing: .02em;
        margin-top: 12px;
        font-size: clamp(21px, 5.5vw, 30px);
        line-height: 1.2
    }

    .hero-rule {
        width: min(320px, 88%);
        margin: 16px 0 13px
    }

    .hero .hero-lead {
        color: #294667;
        letter-spacing: .005em;
        max-width: 34em;
        font-size: 13px;
        font-weight: 560;
        line-height: 1.72
    }

    .hero-mobile-visual {
        z-index: 2;
        object-fit: contain;
        opacity: 1;
        visibility: visible;
        width: 100%;
        height: auto;
        margin-top: -1px;
        position: relative;
        -webkit-mask-image: none;
        mask-image: none;
        display: block !important
    }
}

@media (width<=620px) {
    .challenge-gallery {
        gap: 18px
    }

    .challenge-story {
        border-radius: 22px;
        grid-template-columns: 39% 61%;
        align-items: stretch;
        min-height: 156px;
        display: grid
    }

    .challenge-story figure.generated-3d-stage {
        border-radius: 0;
        width: 100%;
        height: 156px
    }

    .challenge-story:nth-child(2n) figure.generated-3d-stage,
    .challenge-story:nth-child(2n) .story-copy {
        order: initial
    }

    .challenge-story figure.generated-3d-stage img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .story-data figure.generated-3d-stage img {
        transform-origin: 50%;
        transform: scale(1.1)
    }

    .story-data:hover figure.generated-3d-stage img {
        transform: scale(1.1)
    }

    .story-copy {
        min-width: 0;
        min-height: 156px;
        padding: 17px 16px;
        display: block
    }

    .story-copy>span {
        padding: 0 0 12px;
        font-size: 12px;
        display: block
    }

    .story-copy h3 {
        font-size: 20px
    }

    .story-copy p {
        font-size: 11px;
        line-height: 1.6
    }

    .solution-mobile-scene {
        object-fit: cover;
        object-position: 72% center;
        width: calc(100% + 36px);
        max-width: none;
        height: 85.4701vw;
        box-shadow: none;
        border-radius: 0;
        margin: 0 -18px;
        -webkit-mask-image: linear-gradient(#0000 0, #000 7% 100%);
        mask-image: linear-gradient(#0000 0, #000 7% 100%)
    }

    .capability-list.capability-cards h3,
    .capability-list.capability-cards p {
        color: #fff !important
    }

    .capability-list.capability-cards p {
        opacity: .88
    }
}

@media (width>=981px) {
    .hero {
        height: min(750px, 39.0625vw);
        min-height: 0;
        color: var(--ink);
        background-color: #eaf4ff;
        background-image: url(../hero-ai-work-sharp.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        align-items: center;
        padding: 0 max(7.174vw, 50vw - 715.008px);
        display: flex;
        position: relative;
        overflow: hidden
    }

    .hero:before,
    .hero:after {
        display: none !important
    }

    .hero-copy {
        z-index: 2;
        width: 650px;
        max-width: 45%;
        text-shadow: none;
        align-self: auto;
        margin: 0;
        padding: 0 0 8px;
        position: relative
    }

    .hero h1 {
        color: #071d47;
        white-space: nowrap;
        letter-spacing: -.055em;
        max-width: none;
        margin: 0;
        font-size: clamp(48px, 3.75vw, 72px);
        font-weight: 800;
        line-height: 1.12
    }

    .hero-slogan {
        color: #075fd3;
        letter-spacing: .045em;
        margin-top: 17px;
        font-size: clamp(27px, 1.98vw, 38px);
        font-weight: 700;
        line-height: 1.2
    }

    .hero-rule {
        margin: 24px 0 19px
    }

    .hero .hero-lead {
        color: #273c58;
        max-width: 565px;
        margin: 0;
        font-size: 15px;
        font-weight: 560;
        line-height: 1.85;
        display: block
    }

    .hero-mobile-visual {
        display: none !important
    }
}

@media (width<=1279px) and (width>=981px) {
    .hero-copy {
        max-width: 47%;
        padding-bottom: 0
    }

    .hero h1 {
        font-size: clamp(38px, 3.7vw, 48px)
    }

    .hero-slogan {
        margin-top: 11px;
        font-size: clamp(22px, 2.05vw, 28px)
    }

    .hero-rule {
        margin: 17px 0 14px
    }

    .hero .hero-lead {
        max-width: 470px;
        font-size: 11px;
        line-height: 1.7
    }
}

@media (width<=980px) {
    .hero {
        height: auto;
        min-height: 0;
        color: var(--ink);
        background: radial-gradient(at 18% 23%, #ffffffe6, #0000 36%), linear-gradient(#eef5ff 0%, #e8f1fc 38%, #f4f8fd 100%);
        flex-direction: column;
        align-items: stretch;
        padding: clamp(52px, 10vw, 76px) 0 0;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .hero:before,
    .hero:after {
        display: none !important
    }

    .hero-copy {
        z-index: 2;
        width: calc(100% - 64px);
        max-width: none;
        text-shadow: none;
        align-self: auto;
        margin: 0 auto;
        padding: 0 0 clamp(24px, 4vw, 34px);
        position: relative
    }

    .hero h1 {
        color: #092653;
        white-space: normal;
        letter-spacing: -.045em;
        max-width: none;
        margin: 0;
        font-size: clamp(34px, 6vw, 46px);
        line-height: 1.1
    }

    .hero-slogan {
        color: #076bd5;
        margin-top: 8px;
        font-size: clamp(20px, 3.5vw, 27px);
        line-height: 1.2
    }

    .hero-rule {
        width: min(320px, 72%);
        margin: 14px 0 13px
    }

    .hero .hero-lead {
        color: #294667;
        max-width: 52em;
        margin: 0;
        font-size: clamp(12px, 1.75vw, 14px);
        font-weight: 560;
        line-height: 1.65;
        display: block
    }

    .hero-mobile-visual {
        z-index: 1;
        aspect-ratio: 6/5;
        object-fit: contain;
        object-position: center top;
        opacity: 1;
        visibility: visible;
        flex: none;
        width: calc(100% - 28px);
        height: auto;
        margin: 0 auto;
        position: relative;
        -webkit-mask-image: none;
        mask-image: none;
        display: block !important
    }

    .challenge {
        margin-top: 0
    }
}

@media (width<=620px) {
    .hero {
        padding-top: clamp(52px, 16vw, 76px)
    }

    .hero-copy {
        width: calc(100% - 64px);
        padding-bottom: 26px
    }

    .hero h1 {
        font-size: clamp(31px, 8.7vw, 38px)
    }

    .hero-slogan {
        font-size: clamp(19px, 5.4vw, 24px)
    }

    .hero .hero-lead {
        font-size: 11px;
        line-height: 1.65
    }

    .hero-mobile-visual {
        width: calc(100% - 28px);
        margin: 0 auto
    }
}

@media (width<=980px),
(hover:none) and (pointer:coarse) {
    .hero {
        overflow: hidden;
        background: linear-gradient(#c7ddf8 0%, #b8d4f5 48%, #a8c9f1 100%) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        padding: clamp(52px, 10vw, 76px) 0 0 !important;
        display: flex !important
    }

    .hero:before,
    .hero:after {
        display: none !important
    }

    .hero-copy {
        z-index: 2 !important;
        align-self: auto !important;
        width: calc(100% - 64px) !important;
        max-width: none !important;
        margin: 0 auto -2px !important;
        padding: 0 0 clamp(24px, 4vw, 34px) !important;
        position: relative !important
    }

    .hero h1 {
        color: #092653 !important;
        white-space: normal !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: clamp(34px, 6vw, 46px) !important;
        line-height: 1.1 !important
    }

    .hero-slogan {
        color: #076bd5 !important;
        margin-top: 8px !important;
        font-size: clamp(20px, 3.5vw, 27px) !important
    }

    .hero-rule {
        width: min(320px, 72%) !important;
        margin: 14px 0 13px !important
    }

    .hero .hero-lead {
        color: #294667 !important;
        max-width: 52em !important;
        margin: 0 !important;
        font-size: clamp(12px, 1.75vw, 14px) !important;
        line-height: 1.65 !important;
        display: block !important
    }

    .hero-mobile-visual {
        z-index: 1 !important;
        visibility: visible !important;
        opacity: 1 !important;
        aspect-ratio: 6/5 !important;
        object-fit: contain !important;
        object-position: center top !important;
        flex: none !important;
        width: calc(100% - 28px) !important;
        height: auto !important;
        min-height: 1px !important;
        margin: 0 auto !important;
        display: block !important;
        position: relative !important;
        -webkit-mask-image: none !important;
        mask-image: none !important
    }

    .challenge {
        margin-top: 0 !important
    }
}

@media (width<=620px) {
    .hero {
        padding-top: clamp(52px, 16vw, 76px) !important
    }

    .hero-copy {
        padding-bottom: 26px !important
    }

    .hero h1 {
        font-size: clamp(31px, 8.7vw, 38px) !important
    }

    .hero-slogan {
        font-size: clamp(19px, 5.4vw, 24px) !important
    }

    .hero .hero-lead {
        font-size: 11px !important
    }
}

.hero-mobile-visual {
    display: none !important
}

@media (width>=981px) {
    .hero {
        background: #eaf4ff url(../hero-ai-work-sharp.png) 50%/cover no-repeat !important;
        flex-direction: row !important;
        align-items: center !important;
        height: min(750px, 39.0625vw) !important;
        min-height: 0 !important;
        padding: 0 max(7.174vw, 50vw - 715.008px) !important;
        display: flex !important
    }

    .hero-copy {
        width: 650px !important;
        max-width: 45% !important;
        margin: 0 !important;
        padding: 0 0 8px !important
    }
}

@media (width<=980px) {
    .hero {
        background: #dcecff url(../mobile-hero-ai-work.png) bottom/auto 78% no-repeat !important;
        height: clamp(500px, 70vw, 620px) !important;
        min-height: 0 !important;
        padding: clamp(34px, 6vw, 54px) 4% 0 !important;
        display: block !important;
        overflow: hidden !important
    }

    .hero-copy {
        width: 92% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
        padding: 0 !important
    }

    .hero h1 {
        white-space: normal !important;
        font-size: clamp(32px, 6vw, 46px) !important
    }

    .hero-slogan {
        font-size: clamp(20px, 3.5vw, 27px) !important
    }

    .hero .hero-lead {
        max-width: 42em !important;
        font-size: clamp(12px, 1.75vw, 14px) !important
    }
}

@media (width<=620px) {
    .hero {
        background-position: bottom !important;
        background-size: auto 72% !important;
        height: clamp(480px, 138vw, 540px) !important;
        padding: 32px 4% 0 !important
    }

    .hero-copy {
        width: 92% !important;
        max-width: none !important
    }

    .hero h1 {
        font-size: clamp(28px, 8.3vw, 36px) !important;
        line-height: 1.08 !important
    }

    .hero-slogan {
        margin-top: 8px !important;
        font-size: clamp(18px, 5.2vw, 23px) !important
    }

    .hero-rule {
        margin: 11px 0 10px !important
    }

    .hero .hero-lead {
        max-width: 31em !important;
        font-size: 11px !important;
        line-height: 1.55 !important
    }
}

@media (width>=981px) {
    .hero {
        height: clamp(560px, 34.375vw, 660px) !important
    }
}

@media (width<=980px) {
    .hero {
        aspect-ratio: auto !important;
        background: #e9f0f9 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important
    }

    .hero:before {
        display: none !important
    }

    .hero:after {
        content: "" !important;
        z-index: 2 !important;
        pointer-events: none !important;
        background: linear-gradient(#e9f0f900 0%, #e9f0f9 94%) !important;
        height: 72px !important;
        display: block !important;
        position: absolute !important;
        inset: auto 0 -1px !important
    }

    .hero-copy {
        display: none !important
    }

    .hero-mobile-visual {
        z-index: 1 !important;
        aspect-ratio: 5/8 !important;
        object-fit: contain !important;
        object-position: center !important;
        width: min(100%, 750px) !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        position: relative !important
    }

    .challenge {
        margin-top: -2px !important;
        padding-top: 54px !important
    }

    .challenge:before {
        background: linear-gradient(#e9f0f9 0, #f4f8fc 88px, #fff 190px 100%) !important;
        -webkit-mask-image: none !important;
        mask-image: none !important
    }
}

@media (width<=620px) {
    .hero-mobile-visual {
        width: 100% !important
    }

    .challenge {
        padding-top: 46px !important
    }
}