.ai-hero-visual {
    grid-column: span 5;
    position: relative
}

.ai-hero-visual,.fusion-showcase-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.fusion-showcase-wrapper {
    width: 100%
}

.fusion-showcase {
    position: relative;
    width: 500px;
    height: 420px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    z-index: 1
}

.fs-bg-glow {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    -webkit-filter: blur(60px);
    filter: blur(60px);
    z-index: 0;
    -webkit-animation: glow-pulse 4s ease-in-out infinite alternate;
    animation: glow-pulse 4s ease-in-out infinite alternate
}

.fs-bg-glow.glow-blue {
    background: rgba(46,161,255,.35);
    left: 5%;
    top: 15%
}

.fs-bg-glow.glow-green {
    background: rgba(0,212,161,.35);
    right: 5%;
    bottom: 15%;
    -webkit-animation-delay: -2s;
    animation-delay: -2s
}

.fs-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none
}

.fs-path {
    fill: none;
    stroke-width: 2.5;
    stroke-dasharray: 6 6;
    -webkit-animation: dash-flow 20s linear infinite;
    animation: dash-flow 20s linear infinite
}

.fs-card {
    position: absolute;
    width: 160px;
    z-index: 2;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease;
    -webkit-animation: card-float 6s ease-in-out infinite alternate;
    animation: card-float 6s ease-in-out infinite alternate
}

.fs-card.card-left {
    left: 0;
    top: 15%
}

.fs-card.card-right {
    right: 0;
    bottom: 15%;
    -webkit-animation-delay: -3s;
    animation-delay: -3s
}

.fs-card .card-glass {
    background: hsla(0,0%,100%,.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid hsla(0,0%,100%,.9);
    border-radius: 16px;
    padding: 16px;
    -webkit-box-shadow: 0 12px 32px rgba(0,0,0,.06),inset 0 0 0 1px hsla(0,0%,100%,.5);
    box-shadow: 0 12px 32px rgba(0,0,0,.06),inset 0 0 0 1px hsla(0,0%,100%,.5)
}

.fs-card.card-left .card-glass {
    border-left: 4px solid #2ea1ff
}

.fs-card.card-right .card-glass {
    border-right: 4px solid #00d4a1
}

.card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 700
}

.card-header.blue-header {
    color: #2ea1ff
}

.card-header.green-header {
    color: #00b28a
}

.c-icon {
    width: 28px;
    height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: hsla(0,0%,100%,.8);
    border-radius: 8px;
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.05);
    box-shadow: 0 2px 8px rgba(0,0,0,.05)
}

.c-icon svg {
    width: 16px;
    height: 16px
}

.card-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px
}

.card-items .c-item {
    font-size: 13px;
    line-height: 1.4;
    color: #4e5969;
    padding: 8px 12px;
    background: hsla(0,0%,100%,.6);
    border-radius: 8px;
    border: 1px solid hsla(0,0%,100%,.9);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.fs-core {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 3;
    width: 150px;
    height: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.core-rings {
    position: absolute;
    inset: -24px;
    pointer-events: none
}

.core-rings .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(46,161,255,.4);
    -webkit-animation: ring-spin 15s linear infinite;
    animation: ring-spin 15s linear infinite
}

.core-rings .r2 {
    inset: 12px;
    border: 1.5px dashed rgba(0,212,161,.4);
    animation-direction: reverse;
    -webkit-animation-duration: 10s;
    animation-duration: 10s
}

.core-glass {
    background: hsla(0,0%,100%,.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #fff;
    width: 130px;
    height: 130px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
    -webkit-box-shadow: 0 16px 40px rgba(0,0,0,.08),inset 0 0 0 2px #fff,inset 0 0 24px rgba(0,212,161,.15);
    box-shadow: 0 16px 40px rgba(0,0,0,.08),inset 0 0 0 2px #fff,inset 0 0 24px rgba(0,212,161,.15)
}

.core-glass,.core-icon {
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.core-icon {
    width: 44px;
    height: 44px;
    background: #fff;
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.06);
    box-shadow: 0 4px 16px rgba(0,0,0,.06)
}

.core-icon svg {
    width: 26px;
    height: 26px
}

@-webkit-keyframes glow-pulse {
    0% {
        opacity: .6;
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes glow-pulse {
    0% {
        opacity: .6;
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@-webkit-keyframes dash-flow {
    0% {
        stroke-dashoffset: 1000
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes dash-flow {
    0% {
        stroke-dashoffset: 1000
    }

    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes card-float {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    to {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

@keyframes card-float {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    to {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

@-webkit-keyframes ring-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes ring-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@media screen and (max-width: 980px) {
{
    padding:80px 0 40px
}

    .ai-hero-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 28px
    }

    .ai-hero-title {
        font-size: 32px;
        line-height: 1.35
    }

    .ai-hero-desc {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 24px
    }

    .ai-hero-actions {
        margin-bottom: 24px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 12px
    }

    .btn-ai-primary,.btn-ai-secondary {
        height: 42px;
        padding: 0 22px;
        font-size: 14px
    }

    .ai-hero-stats {
        gap: 18px
    }

    .stat-val {
        font-size: 20px
    }

    .fusion-showcase {
        -webkit-transform: scale(.75);
        transform: scale(.75);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        margin: -50px 0
    }
}

.fx-ai-page .ai-cta-section {
    position: relative;
    padding: 140px 0;
    background: #f7f8fa;
    color: #1d2129;
    overflow: hidden;
    text-align: center
}

.fx-ai-page .ai-cta-section .ai-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none
}

.fx-ai-page .ai-cta-section .cta-mesh {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,0,0,.03) 1px,transparent 0),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 0);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center,#000 20%,transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center,#000 20%,transparent 80%)
}

.fx-ai-page .ai-cta-section .cta-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    -webkit-filter: blur(120px);
    filter: blur(120px);
    opacity: .15;
    mix-blend-mode: multiply;
    -webkit-animation: cta-float 10s ease-in-out infinite alternate;
    animation: cta-float 10s ease-in-out infinite alternate
}

.fx-ai-page .ai-cta-section .cta-glow-1 {
    top: -200px;
    left: 5%;
    background: #1a7af8;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.fx-ai-page .ai-cta-section .cta-glow-2 {
    bottom: -200px;
    right: 5%;
    background: #00d4a1;
    -webkit-animation-delay: -5s;
    animation-delay: -5s
}

.fx-ai-page .ai-cta-section .ai-cta-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--layout-padding-inline)
}

.fx-ai-page .ai-cta-section .cta-badge {
    background: rgba(26,122,248,.08);
    color: #1a7af8;
    border: 1px solid rgba(26,122,248,.2);
    margin-bottom: 32px
}

.fx-ai-page .ai-cta-section .cta-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 24px;
    background: linear-gradient(135deg,#1a7af8,#7e47eb 50%,#00d4a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.fx-ai-page .ai-cta-section .cta-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #4e5969;
    margin: 0 0 48px
}

@media(max-width: 768px) {
    .fx-ai-page .ai-cta-section {
        padding:40px 0
    }

    .fx-ai-page .ai-cta-section .cta-title {
        font-size: 26px
    }

    .fx-ai-page .ai-cta-section .cta-desc {
        font-size: 16px;
        margin-bottom: 24px
    }
}

@-webkit-keyframes cta-float {
    0% {
        -webkit-transform: translate(0) scale(1);
        transform: translate(0) scale(1)
    }

    50% {
        -webkit-transform: translate(50px,50px) scale(1.1);
        transform: translate(50px,50px) scale(1.1)
    }

    to {
        -webkit-transform: translate(-50px,-50px) scale(.9);
        transform: translate(-50px,-50px) scale(.9)
    }
}

@keyframes cta-float {
    0% {
        -webkit-transform: translate(0) scale(1);
        transform: translate(0) scale(1)
    }

    50% {
        -webkit-transform: translate(50px,50px) scale(1.1);
        transform: translate(50px,50px) scale(1.1)
    }

    to {
        -webkit-transform: translate(-50px,-50px) scale(.9);
        transform: translate(-50px,-50px) scale(.9)
    }
}

@-webkit-keyframes cta-shine {
    0% {
        left: -100%
    }

    20% {
        left: 200%
    }

    to {
        left: 200%
    }
}

@keyframes cta-shine {
    0% {
        left: -100%
    }

    20% {
        left: 200%
    }

    to {
        left: 200%
    }
}

.fx-ai-page .ai-custom-agent-section {
    background-color: #fff;
    padding: 50px 0 100px;
    position: relative;
    overflow: hidden
}

.fx-ai-page .ai-custom-agent-section .ai-custom-header {
    text-align: center;
    margin-bottom: 80px
}

.fx-ai-page .ai-custom-agent-section .custom-agent-layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 30px
}

.fx-ai-page .ai-custom-agent-section .ca-block {
    position: relative
}

.fx-ai-page .ai-custom-agent-section .ca-left,.fx-ai-page .ai-custom-agent-section .ca-right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 480px;
    background: #f7f8fa;
    border-radius: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 0 16px 48px rgba(0,0,0,.04);
    box-shadow: 0 16px 48px rgba(0,0,0,.04);
    border: 1px solid #f2f3f5;
    overflow: hidden
}

.fx-ai-page .ai-custom-agent-section .ca-bg-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 1
}

.fx-ai-page .ai-custom-agent-section .ca-middle {
    width: 200px;
    height: 400px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.fx-ai-page .ai-custom-agent-section .ca-connection-line {
    position: absolute;
    top: 50%;
    left: -32px;
    right: -32px;
    height: 3px;
    background: -webkit-gradient(linear,left top,right top,from(rgba(26,122,248,.2)),color-stop(50%,rgba(26,122,248,.8)),to(rgba(0,212,161,.8)));
    background: linear-gradient(90deg,rgba(26,122,248,.2),rgba(26,122,248,.8) 50%,rgba(0,212,161,.8));
    z-index: 1;
    border-radius: 3px
}

.fx-ai-page .ai-custom-agent-section .ca-connection-line:after,.fx-ai-page .ai-custom-agent-section .ca-connection-line:before {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #1a7af8
}

.fx-ai-page .ai-custom-agent-section .ca-connection-line:before {
    left: 0;
    -webkit-box-shadow: 0 0 0 4px rgba(26,122,248,.2);
    box-shadow: 0 0 0 4px rgba(26,122,248,.2)
}

.fx-ai-page .ai-custom-agent-section .ca-connection-line:after {
    right: 0;
    border-color: #00d4a1;
    -webkit-box-shadow: 0 0 0 4px rgba(0,212,161,.2);
    box-shadow: 0 0 0 4px rgba(0,212,161,.2)
}

.fx-ai-page .ai-custom-agent-section .ca-service-nodes {
    z-index: 2;
    gap: 32px;
    width: 100%
}

.fx-ai-page .ai-custom-agent-section .ca-service-node,.fx-ai-page .ai-custom-agent-section .ca-service-nodes {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.fx-ai-page .ai-custom-agent-section .ca-service-node {
    background: #fff;
    border: 1px solid #1a7af8;
    border-radius: 16px;
    padding: 20px 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 12px;
    -webkit-box-shadow: 0 12px 32px rgba(26,122,248,.12);
    box-shadow: 0 12px 32px rgba(26,122,248,.12);
    -webkit-transition: -webkit-transform .4s cubic-bezier(.2,.8,.2,1),-webkit-box-shadow .4s;
    transition: -webkit-transform .4s cubic-bezier(.2,.8,.2,1),-webkit-box-shadow .4s;
    transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
    transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,-webkit-transform .4s cubic-bezier(.2,.8,.2,1),-webkit-box-shadow .4s
}

.fx-ai-page .ai-custom-agent-section .ca-service-node .ca-node-icon {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg,#1a7af8,#2ea1ff);
    padding: 6px 16px;
    border-radius: 100px;
    letter-spacing: 1px
}

.fx-ai-page .ai-custom-agent-section .ca-service-node .ca-node-text {
    font-size: 16px;
    font-weight: 600;
    color: #1d2129
}

.fx-ai-page .ai-custom-agent-section .ca-service-node.node-mcp {
    border-color: #00d4a1;
    -webkit-box-shadow: 0 12px 32px rgba(0,212,161,.12);
    box-shadow: 0 12px 32px rgba(0,212,161,.12)
}

.fx-ai-page .ai-custom-agent-section .ca-service-node.node-mcp .ca-node-icon {
    background: linear-gradient(135deg,#00d4a1,#00b28a)
}

.fx-ai-page .ai-custom-agent-section .ca-service-node.node-mcp:hover {
    -webkit-box-shadow: 0 20px 40px rgba(0,212,161,.2);
    box-shadow: 0 20px 40px rgba(0,212,161,.2)
}

.fx-ai-page .ai-custom-agent-section .ca-service-node.node-api:hover {
    -webkit-box-shadow: 0 20px 40px rgba(26,122,248,.2);
    box-shadow: 0 20px 40px rgba(26,122,248,.2)
}

.fx-ai-page .ai-custom-agent-section .ca-service-node.node-cli {
    border-color: #9b63f8;
    -webkit-box-shadow: 0 12px 32px rgba(155,99,248,.12);
    box-shadow: 0 12px 32px rgba(155,99,248,.12)
}

.fx-ai-page .ai-custom-agent-section .ca-service-node.node-cli .ca-node-icon {
    background: linear-gradient(135deg,#9b63f8,#7e47eb)
}

.fx-ai-page .ai-custom-agent-section .ca-service-node.node-cli:hover {
    -webkit-box-shadow: 0 20px 40px rgba(155,99,248,.2);
    box-shadow: 0 20px 40px rgba(155,99,248,.2)
}

.fx-ai-page .ai-custom-agent-section .ca-center-avatar,.fx-ai-page .ai-custom-agent-section .ca-center-logo {
    width: 160px;
    height: 160px;
    background: #fff;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 0 16px 40px rgba(0,0,0,.08);
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
    border: 1px solid #e5e6eb;
    z-index: 10;
    position: relative
}

.fx-ai-page .ai-custom-agent-section .ca-center-logo img {
    width: 70%;
    -o-object-fit: contain;
    object-fit: contain;
    height: auto
}

.fx-ai-page .ai-custom-agent-section .ca-center-avatar {
    padding: 6px
}

.fx-ai-page .ai-custom-agent-section .ca-center-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover
}

.fx-ai-page .ai-custom-agent-section .ca-bubble {
    position: absolute;
    background: #fff;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    color: #4e5969;
    -webkit-box-shadow: 0 8px 24px rgba(0,0,0,.06);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    border: 1px solid #f2f3f5;
    white-space: nowrap;
    -webkit-animation: ca-float 6s ease-in-out infinite;
    animation: ca-float 6s ease-in-out infinite;
    z-index: 15;
    text-align: center;
    line-height: 1.3
}

.fx-ai-page .ai-custom-agent-section .ca-bubble small {
    display: block;
    font-size: 12px;
    color: #86909c;
    margin-top: 4px;
    font-weight: 500
}

.fx-ai-page .ai-custom-agent-section .ca-b-1 {
    top: 15%;
    left: 10%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    color: #1a7af8;
    background: #f0f6ff;
    border-color: #bce0ff
}

.fx-ai-page .ai-custom-agent-section .ca-b-2 {
    top: 12%;
    right: 15%;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    color: #ff7b52;
    background: #fff4f0;
    border-color: #ffcfbe
}

.fx-ai-page .ai-custom-agent-section .ca-b-3 {
    top: 42%;
    left: 2%;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    color: #7e47eb;
    background: #f6f0ff;
    border-color: #d6c2ff
}

.fx-ai-page .ai-custom-agent-section .ca-b-4 {
    top: 40%;
    right: 2%;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    color: #00b28a;
    background: #eaf8f5;
    border-color: #a3ead6
}

.fx-ai-page .ai-custom-agent-section .ca-b-5 {
    bottom: 18%;
    left: 15%;
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    color: #f53f3f;
    background: #fff0f0;
    border-color: #ffc2c2
}

.fx-ai-page .ai-custom-agent-section .ca-b-6 {
    bottom: 15%;
    right: 15%;
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    color: #86909c
}

.fx-ai-page .ai-custom-agent-section .ca-b-r1 {
    top: 15%;
    left: 12%;
    -webkit-animation-delay: -1.5s;
    animation-delay: -1.5s;
    color: #7e47eb;
    background: #f5eeff;
    border-color: #d8c2ff
}

.fx-ai-page .ai-custom-agent-section .ca-b-r2 {
    top: 18%;
    right: 10%;
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s;
    color: #00d4a1;
    background: #e6fff8;
    border-color: #a3f0db
}

.fx-ai-page .ai-custom-agent-section .ca-b-r3 {
    bottom: 22%;
    left: 8%;
    -webkit-animation-delay: -2.5s;
    animation-delay: -2.5s;
    color: #ff7b52;
    background: #fff2ed;
    border-color: #ffd0c2
}

.fx-ai-page .ai-custom-agent-section .ca-b-r4 {
    bottom: 16%;
    right: 12%;
    -webkit-animation-delay: -3.5s;
    animation-delay: -3.5s;
    color: #1a7af8;
    background: #f0f6ff;
    border-color: #bce0ff
}

@media(max-width: 1024px) {
    .fx-ai-page .ai-custom-agent-section .custom-agent-layout {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .fx-ai-page .ai-custom-agent-section .ca-left,.fx-ai-page .ai-custom-agent-section .ca-right {
        width: 100%
    }

    .fx-ai-page .ai-custom-agent-section .ca-middle {
        width: 100%;
        height: auto;
        padding: 32px 0
    }

    .fx-ai-page .ai-custom-agent-section .ca-connection-line {
        width: 3px;
        height: 100%;
        top: 0;
        bottom: 0
    }

    .fx-ai-page .ai-custom-agent-section .ca-connection-line,.fx-ai-page .ai-custom-agent-section .ca-connection-line:after,.fx-ai-page .ai-custom-agent-section .ca-connection-line:before {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    .fx-ai-page .ai-custom-agent-section .ca-connection-line:before {
        top: 0
    }

    .fx-ai-page .ai-custom-agent-section .ca-connection-line:after {
        top: auto;
        bottom: 0
    }

    .fx-ai-page .ai-custom-agent-section .ca-service-nodes {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media(max-width: 768px) {
    .fx-ai-page .ai-custom-agent-section {
        padding:40px 0
    }

    .fx-ai-page .ai-custom-agent-section .ai-custom-header {
        margin-bottom: 40px
    }

    .fx-ai-page .ai-custom-agent-section .custom-agent-layout .ca-left,.fx-ai-page .ai-custom-agent-section .custom-agent-layout .ca-right {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        height: 300px
    }

    .fx-ai-page .ai-custom-agent-section .ca-middle {
        width: 100%;
        height: auto;
        padding: 20px 0
    }
}

@-webkit-keyframes ca-float {
    0%,to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px)
    }
}

@keyframes ca-float {
    0%,to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px)
    }
}

.fx-ai-page .ai-features-section {
    padding: 80px 0;
    background: #fff
}

.fx-ai-page .ai-features-section .ai-features-container {
    margin: 0 auto
}

.fx-ai-page .ai-features-section .ai-section-header {
    text-align: center;
    margin-bottom: 48px
}

.fx-ai-page .ai-features-section .ai-section-header .ai-badge {
    margin-bottom: 20px
}

.fx-ai-page .ai-features-section .ai-section-header h2 {
    font-size: 40px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 20px;
    letter-spacing: -.02em
}

.fx-ai-page .ai-features-section .ai-cards-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 30px
}

.fx-ai-page .ai-features-section .ai-cards-grid>.ai-feature-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 calc((100% - 60px)/3);
    flex: 0 1 calc((100% - 60px)/3);
    max-width: 420px;
    min-width: 320px
}

{
    border-radius: 28px;
    padding: 40px 32px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    -webkit-transition: -webkit-transform .6s cubic-bezier(.2,.8,.2,1),-webkit-box-shadow .6s cubic-bezier(.2,.8,.2,1);
    transition: -webkit-transform .6s cubic-bezier(.2,.8,.2,1),-webkit-box-shadow .6s cubic-bezier(.2,.8,.2,1);
    transition: transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s cubic-bezier(.2,.8,.2,1);
    transition: transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s cubic-bezier(.2,.8,.2,1),-webkit-transform .6s cubic-bezier(.2,.8,.2,1),-webkit-box-shadow .6s cubic-bezier(.2,.8,.2,1);
    min-height: 420px;
    border: 1px solid hsla(0,0%,100%,.6);
    -webkit-box-shadow: 0 4px 24px rgba(0,0,0,.03);
    box-shadow: 0 4px 24px rgba(0,0,0,.03)
}

.fx-ai-page .ai-features-section .ai-feature-card:hover {
    -webkit-transform: translateY(-8px) scale(1.02);
    transform: translateY(-8px) scale(1.02);
    -webkit-box-shadow: 0 24px 48px rgba(0,0,0,.08);
    box-shadow: 0 24px 48px rgba(0,0,0,.08)
}

.fx-ai-page .ai-features-section .ai-feature-card.card-l1 {
    background: linear-gradient(145deg,#f0fdf9,#e0fff5)
}

.fx-ai-page .ai-features-section .ai-feature-card.card-l2 {
    background: linear-gradient(145deg,#f0f7ff,#e0efff)
}

.fx-ai-page .ai-features-section .ai-feature-card.card-l3 {
    background: linear-gradient(145deg,#f5f0ff,#ede0ff)
}

.card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px
}

.card-role {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.card-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 32px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.card-image-placeholder {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 260px;
    border-radius: 24px 24px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    overflow: hidden
}

.card-image-placeholder img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    display: block
}

@media(max-width: 1024px) {
    .fx-ai-page .ai-features-section .ai-cards-grid>.ai-feature-card {
        -webkit-box-flex:0;
        -ms-flex: 0 1 calc((100% - 30px)/2);
        flex: 0 1 calc((100% - 30px)/2);
        max-width: 480px
    }
}

@media(max-width: 980px) {
    .fx-ai-page .ai-features-section {
        padding:40px 0
    }

    .fx-ai-page .ai-features-section .ai-section-header h2 {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 10px
    }

    .fx-ai-page .ai-features-section .ai-cards-grid>.ai-feature-card {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        max-width: 100%;
        min-width: auto
    }
}

@-webkit-keyframes slide-in-up {
    0% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-up {
    0% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-in-down {
    0% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-down {
    0% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

.fx-ai-page {
    overflow: hidden
}

.fx-ai-page .ai-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 6px 16px;
    background: rgba(0,212,161,.08);
    color: #00b28a;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(0,212,161,.2)
}

.fx-ai-page .bricks {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px
}

@media screen and (max-width: 800px) {
    .fx-ai-page .bricks {
        width:100%;
        padding: 0 18px
    }
}

.fx-ai-page .btn-cta-primary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 40px;
    border-radius: 100px;
    background: -webkit-gradient(linear,left top,right top,from(#1a7af8),to(#00d4a1));
    background: linear-gradient(90deg,#1a7af8,#00d4a1);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    -webkit-transition: -webkit-transform .3s,-webkit-box-shadow .3s;
    transition: -webkit-transform .3s,-webkit-box-shadow .3s;
    transition: transform .3s,box-shadow .3s;
    transition: transform .3s,box-shadow .3s,-webkit-transform .3s,-webkit-box-shadow .3s;
    -webkit-box-shadow: 0 8px 32px rgba(26,122,248,.25);
    box-shadow: 0 8px 32px rgba(26,122,248,.25);
    position: relative;
    overflow: hidden;
    margin-top: 40px
}

.fx-ai-page .btn-cta-primary:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(hsla(0,0%,100%,.3)),to(transparent));
    background: linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    -webkit-animation: cta-shine 3s infinite;
    animation: cta-shine 3s infinite
}

.fx-ai-page .btn-cta-primary:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0 12px 40px rgba(0,212,161,.4);
    box-shadow: 0 12px 40px rgba(0,212,161,.4);
    color: #fff
}

@media(max-width: 768px) {
    .fx-ai-page .btn-cta-primary {
        height:48px;
        padding: 0 24px;
        font-size: 16px
    }
}