/* =========================================================
   ZBITVERSE
   CAPABILITIES PAGE
   Version: 1.0

   Purpose:
   Visual system for the capabilities ecosystem.

   Design language:
   - Deep technological background
   - Electric blue
   - Network architecture
   - ENGINE ZERO
   - Nodes
   - Convergence
   - Controlled motion
========================================================= */


/* =========================================================
   01. PAGE FOUNDATION
========================================================= */

.capabilities-hero,
.capabilities-system-intro,
.capabilities-grid-section,
.capability-flow,
.capabilities-convergence,
.capability-statement,
.capabilities-cta {

    position: relative;

    overflow: hidden;

}


.capabilities-hero {

    min-height: 100vh;

    padding-top: calc(
        var(--header-height, 80px) + 5rem
    );

    padding-bottom: 7rem;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(37, 99, 235, .08),
            transparent 32%
        );

}


/* =========================================================
   02. PAGE LABEL
========================================================= */

.page-label {

    display: inline-flex;

    align-items: center;

    gap: .75rem;

    margin-bottom: 2.5rem;

    color: var(--color-primary, #2563eb);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .2rem;

    text-transform: uppercase;

}


.page-label span {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(
        --color-primary,
        #2563eb
    );

    box-shadow:
        0 0 12px
        rgba(37, 99, 235, .8);

}


/* =========================================================
   03. HERO INTRO
========================================================= */

.capabilities-intro {

    position: relative;

    z-index: 5;

    width: min(
        100%,
        760px
    );

}


.capabilities-intro h1 {

    margin: 0;

    max-width: 850px;

    font-size:
        clamp(
            3.8rem,
            7vw,
            7rem
        );

    font-weight: 700;

    line-height: .98;

    letter-spacing: -.055em;

    color: var(
        --color-white,
        #f8fafc
    );

}


.capabilities-intro h1 span {

    display: block;

    color: var(
        --color-primary,
        #2563eb
    );

}


.capabilities-intro p {

    max-width: 720px;

    margin-top: 2.25rem;

    color: var(
        --color-text-secondary,
        #b8c2d1
    );

    font-size: 1.15rem;

    line-height: 1.8;

}


/* =========================================================
   04. ENGINE ZERO AREA
========================================================= */

.capabilities-engine {

    position: relative;

    width: 100%;

    height: 520px;

    margin-top: 4rem;

    isolation: isolate;

}


/* =========================================================
   05. TECHNOLOGICAL GRID
========================================================= */

.capabilities-network-grid {

    position: absolute;

    inset: 0;

    z-index: 0;

    opacity: .55;

    background-image:

        linear-gradient(
            rgba(37, 99, 235, .07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(37, 99, 235, .07) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    mask-image:
        radial-gradient(
            circle at center,
            black 0%,
            rgba(0,0,0,.8) 35%,
            transparent 78%
        );

}


/* =========================================================
   06. NETWORK SVG
========================================================= */

.capabilities-network {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    overflow: visible;

}


.capabilities-network line {

    stroke:
        rgba(37, 99, 235, .35);

    stroke-width: 1;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 5px
            rgba(37, 99, 235, .25)
        );

}


/* =========================================================
   07. CAPABILITY NODES
========================================================= */

.capability-node {

    position: absolute;

    z-index: 4;

    display: inline-flex;

    align-items: center;

    gap: .65rem;

    min-width: 145px;

    padding: .7rem 1rem;

    border: 1px solid
        rgba(37, 99, 235, .45);

    border-radius: 999px;

    background:
        rgba(5, 10, 25, .82);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 0 0 1px
        rgba(255,255,255,.015),

        0 10px 40px
        rgba(0,0,0,.25);

    color:
        rgba(226,232,240,.85);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .12rem;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.capability-node:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(37, 99, 235, .9);

    box-shadow:
        0 0 25px
        rgba(37, 99, 235, .16);

}


.capability-node-pulse {

    width: 6px;

    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(
            --color-primary,
            #2563eb
        );

    box-shadow:
        0 0 10px
        rgba(37,99,235,.9);

}


.capability-node-label {

    white-space: nowrap;

}


/* =========================================================
   NODE POSITIONS
========================================================= */

.capability-node-cloud {

    top: 5%;

    left: 50%;

    transform:
        translateX(-50%);

}


.capability-node-cloud:hover {

    transform:
        translateX(-50%)
        translateY(-4px);

}


.capability-node-automation {

    top: 42%;

    right: 3%;

}


.capability-node-intelligence {

    bottom: 8%;

    right: 16%;

}


.capability-node-development {

    bottom: 8%;

    left: 16%;

}


/* =========================================================
   08. ENGINE ZERO CORE
========================================================= */

.capabilities-core {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 5;

    width: 190px;

    height: 190px;

    transform:
        translate(-50%, -50%);

}


/* =========================================================
   CORE GLOW
========================================================= */

.capabilities-core-glow {

    position: absolute;

    inset: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.22) 0%,
            rgba(37,99,235,.08) 30%,
            transparent 68%
        );

    filter:
        blur(12px);

    animation:
        capabilitiesCoreGlow
        4s ease-in-out
        infinite;

}


/* =========================================================
   CORE RINGS
========================================================= */

.capabilities-core-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 1px solid
        rgba(37,99,235,.35);

}


.capabilities-core-ring-outer {

    transform: scale(1.55);

    border-color:
        rgba(148,163,184,.22);

}


.capabilities-core-ring-middle {

    transform: scale(1.18);

    border-color:
        rgba(37,99,235,.55);

}


.capabilities-core-ring-inner {

    transform: scale(.82);

    border-color:
        rgba(37,99,235,.7);

}


/* =========================================================
   CORE CENTER
========================================================= */

.capabilities-core-center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 78px;

    height: 78px;

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid
        rgba(96,165,250,.75);

    background:
        radial-gradient(
            circle at 35% 30%,
            #3b82f6,
            #0f3fae 45%,
            #06112d 100%
        );

    box-shadow:

        0 0 20px
        rgba(37,99,235,.75),

        0 0 55px
        rgba(37,99,235,.35);

}


.capabilities-core-center span {

    color:
        rgba(255,255,255,.65);

    font-size: .5rem;

    font-weight: 700;

    letter-spacing: .16rem;

}


.capabilities-core-center strong {

    color:
        #ffffff;

    font-size: .75rem;

    letter-spacing: .12rem;

}


/* =========================================================
   09. SYSTEM INTRO
========================================================= */

.capabilities-system-intro {

    padding:
        8rem 0 4rem;

}


.capabilities-system-heading {

    max-width: 780px;

}


.section-kicker {

    display: block;

    margin-bottom: 1.5rem;

    color:
        var(
            --color-primary,
            #2563eb
        );

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .18rem;

    text-transform: uppercase;

}


.capabilities-system-heading h2,
.capability-flow-heading h2 {

    margin: 0;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: 1;

    letter-spacing: -.045em;

    color:
        var(
            --color-white,
            #ffffff
        );

}


.capabilities-system-heading h2 span,
.capability-flow-heading h2 span {

    display: block;

    color:
        var(
            --color-primary,
            #2563eb
        );

}


.capabilities-system-heading p,
.capability-flow-heading p {

    max-width: 680px;

    margin-top: 2rem;

    color:
        var(
            --color-text-secondary,
            #aeb8c7
        );

    font-size: 1.05rem;

    line-height: 1.8;

}


/* =========================================================
   10. CAPABILITY GRID
========================================================= */

.capabilities-grid-section {

    padding:
        4rem 0 8rem;

}


.capabilities-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1rem;

}


/* =========================================================
   11. CAPABILITY CARD
========================================================= */

.capability-card {

    position: relative;

    min-height: 430px;

    padding: 2rem;

    overflow: hidden;

    border: 1px solid
        rgba(148,163,184,.12);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.72),
            rgba(4,8,20,.92)
        );

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}


.capability-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37,99,235,.7),
            transparent
        );

    opacity: .5;

}


.capability-card::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -80px;

    bottom: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.12),
            transparent 70%
        );

    pointer-events: none;

}


.capability-card:hover,
.capability-card.is-active {

    transform:
        translateY(-8px);

    border-color:
        rgba(37,99,235,.45);

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.28),

        0 0 35px
        rgba(37,99,235,.08);

}


/* =========================================================
   CARD TOP
========================================================= */

.capability-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.capability-number {

    color:
        rgba(148,163,184,.45);

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .12rem;

}


.capability-domain {

    color:
        rgba(148,163,184,.55);

    font-size: .62rem;

    font-weight: 700;

    letter-spacing: .13rem;

}


/* =========================================================
   SYSTEM ICON
========================================================= */

.capability-system-icon {

    position: relative;

    width: 62px;

    height: 62px;

    margin:
        3.5rem 0 2rem;

    border:
        1px solid
        rgba(37,99,235,.4);

    border-radius: 14px;

    background:
        rgba(37,99,235,.05);

}


.capability-system-icon::before {

    content: "";

    position: absolute;

    inset: 14px;

    border:
        1px solid
        rgba(37,99,235,.7);

    border-radius: 50%;

}


.capability-system-icon::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 7px;

    height: 7px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        var(
            --color-primary,
            #2563eb
        );

    box-shadow:
        0 0 12px
        rgba(37,99,235,.9);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.capability-card h2 {

    margin: 0;

    max-width: 360px;

    color:
        var(
            --color-white,
            #ffffff
        );

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.6rem
        );

    line-height: 1.05;

    letter-spacing: -.035em;

}


.capability-card h2 span {

    display: block;

    color:
        var(
            --color-primary,
            #2563eb
        );

}


.capability-card p {

    max-width: 430px;

    margin-top: 1.5rem;

    color:
        var(
            --color-text-secondary,
            #aeb8c7
        );

    font-size: .98rem;

    line-height: 1.75;

}


/* =========================================================
   CARD FOOTER
========================================================= */

.capability-card-footer {

    position: absolute;

    right: 2rem;

    bottom: 2rem;

    left: 2rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(148,163,184,.12);

}


.capability-card-footer > span {

    color:
        rgba(148,163,184,.45);

    font-size: .62rem;

    font-weight: 700;

    letter-spacing: .14rem;

}


.capability-card-footer a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:
        rgba(255,255,255,.72);

    font-size: .82rem;

    text-decoration: none;

    transition:
        color .25s ease;

}


.capability-card-footer a:hover {

    color:
        var(
            --color-primary,
            #2563eb
        );

}


.capability-card-footer a span {

    color:
        var(
            --color-primary,
            #2563eb
        );

    font-size: 1.1rem;

}


/* =========================================================
   12. CAPABILITY FLOW
========================================================= */

.capability-flow {

    padding:
        8rem 0;

    border-top:
        1px solid
        rgba(148,163,184,.08);

    border-bottom:
        1px solid
        rgba(148,163,184,.08);

    background:
        radial-gradient(
            circle at center,
            rgba(37,99,235,.06),
            transparent 45%
        );

}


.capability-flow-heading {

    max-width: 720px;

}


.capability-flow-system {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    margin-top: 5rem;

}


.flow-node,
.flow-result {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 150px;

    min-height: 120px;

    padding: 1.25rem;

    border:
        1px solid
        rgba(37,99,235,.25);

    border-radius: 14px;

    background:
        rgba(5,10,25,.7);

}


.flow-index {

    margin-bottom: .75rem;

    color:
        rgba(37,99,235,.8);

    font-size: .65rem;

    font-weight: 700;

}


.flow-node strong {

    color:
        #ffffff;

    font-size: .72rem;

    letter-spacing: .08rem;

}


.flow-node small {

    margin-top: .5rem;

    color:
        rgba(148,163,184,.55);

}


.flow-connector {

    color:
        var(
            --color-primary,
            #2563eb
        );

    font-size: 1.5rem;

}


.flow-result {

    border-color:
        rgba(37,99,235,.6);

    box-shadow:
        0 0 30px
        rgba(37,99,235,.1);

}


.flow-result span {

    color:
        rgba(148,163,184,.55);

    font-size: .6rem;

    letter-spacing: .12rem;

}


.flow-result strong {

    margin-top: .5rem;

    color:
        var(
            --color-primary,
            #2563eb
        );

    font-size: .9rem;

    letter-spacing: .1rem;

}


/* =========================================================
   13. CONVERGENCE
========================================================= */

.capabilities-convergence {

    padding:
        10rem 0;

}


.convergence-layout {

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 6rem;

}


.convergence-content {

    max-width: 580px;

}


.convergence-content h2 {

    margin: 0;

    color:
        var(
            --color-white,
            #ffffff
        );

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: 1;

    letter-spacing: -.045em;

}


.convergence-content h2 span {

    color:
        var(
            --color-primary,
            #2563eb
        );

}


.convergence-content p {

    margin-top: 2rem;

    color:
        var(
            --color-text-secondary,
            #aeb8c7
        );

    line-height: 1.8;

}


/* =========================================================
   14. CONVERGENCE DIAGRAM
========================================================= */

.convergence-diagram {

    position: relative;

    width: 100%;

    min-height: 520px;

}


.convergence-center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 130px;

    height: 130px;

    transform:
        translate(-50%, -50%);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(37,99,235,.7);

    background:
        radial-gradient(
            circle,
            #2563eb 0%,
            #071331 48%,
            #030817 100%
        );

    box-shadow:
        0 0 30px
        rgba(37,99,235,.45),

        0 0 80px
        rgba(37,99,235,.15);

    z-index: 5;

}


.convergence-center-glow {

    position: absolute;

    inset: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.16),
            transparent 70%
        );

    filter:
        blur(10px);

    z-index: -1;

}


.convergence-center-ring {

    position: absolute;

    inset: -25px;

    border-radius: 50%;

    border:
        1px solid
        rgba(37,99,235,.25);

}


.convergence-center span {

    color:
        #ffffff;

    font-size: 2.2rem;

    font-weight: 700;

}


.convergence-node {

    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 105px;

    height: 105px;

    border:
        1px solid
        rgba(37,99,235,.45);

    border-radius: 50%;

    background:
        rgba(5,10,25,.85);

    color:
        rgba(255,255,255,.75);

    font-size: .65rem;

    font-weight: 700;

    letter-spacing: .08rem;

    text-decoration: none;

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.convergence-node:hover {

    transform:
        scale(1.08);

    border-color:
        rgba(37,99,235,.9);

}


.convergence-node-1 {

    top: 4%;

    left: 12%;

}


.convergence-node-2 {

    top: 4%;

    right: 12%;

}


.convergence-node-3 {

    bottom: 4%;

    right: 12%;

}


.convergence-node-4 {

    bottom: 4%;

    left: 12%;

}


/* =========================================================
   CONVERGENCE LINES
========================================================= */

.convergence-line {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 40%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.05),
            rgba(37,99,235,.55)
        );

}


.convergence-line-1 {

    transform:
        rotate(-150deg);

}


.convergence-line-2 {

    transform:
        rotate(-30deg);

}


.convergence-line-3 {

    transform:
        rotate(30deg);

}


.convergence-line-4 {

    transform:
        rotate(150deg);

}


/* =========================================================
   15. STATEMENT
========================================================= */

.capability-statement {

    padding:
        9rem 0;

}


.statement {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}


.statement > span {

    color:
        var(
            --color-primary,
            #2563eb
        );

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .18rem;

}


.statement h2 {

    margin:
        1.5rem 0 0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.8rem
        );

    line-height: 1;

    letter-spacing: -.045em;

}


.statement p {

    max-width: 720px;

    margin:
        2rem auto 0;

    color:
        var(
            --color-text-secondary,
            #aeb8c7
        );

    font-size: 1.05rem;

    line-height: 1.8;

}


/* =========================================================
   16. CTA
========================================================= */

.capabilities-cta {

    padding:
        2rem 0 8rem;

}


.capabilities-cta-inner {

    position: relative;

    padding:
        4rem;

    overflow: hidden;

    border:
        1px solid
        rgba(37,99,235,.35);

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(37,99,235,.25),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            rgba(37,99,235,.18),
            rgba(4,8,20,.95)
        );

}


.capabilities-cta-inner > span {

    color:
        #60a5fa;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .18rem;

}


.capabilities-cta-inner h2 {

    max-width: 760px;

    margin:
        1rem 0 0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.3rem,
            4vw,
            4rem
        );

    line-height: 1;

    letter-spacing: -.04em;

}


.capabilities-cta-inner p {

    max-width: 560px;

    margin:
        1.5rem 0 2rem;

    color:
        rgba(226,232,240,.7);

}


.capabilities-cta-inner .btn {

    display: inline-flex;

    align-items: center;

    gap: .8rem;

}


/* =========================================================
   17. CORE ANIMATION
========================================================= */

@keyframes capabilitiesCoreGlow {

    0%,
    100% {

        opacity: .55;

        transform:
            scale(.95);

    }

    50% {

        opacity: 1;

        transform:
            scale(1.08);

    }

}


/* =========================================================
   18. REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .capabilities-core-glow {

        animation: none;

    }

    .capability-card,
    .capability-node,
    .convergence-node {

        transition: none;

    }

}


/* =========================================================
   19. TABLET
========================================================= */

@media (max-width: 992px) {


    .capabilities-hero {

        padding-top:
            calc(
                var(--header-height, 80px)
                + 4rem
            );

    }


    .capabilities-intro {

        width: 100%;

    }


    .capabilities-engine {

        height: 500px;

    }


    .capabilities-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .convergence-layout {

        grid-template-columns:
            1fr;

        gap: 4rem;

    }


    .convergence-content {

        max-width: 700px;

    }


    .capability-flow-system {

        flex-wrap: wrap;

    }

}


/* =========================================================
   20. MOBILE
========================================================= */

@media (max-width: 700px) {


    .capabilities-hero {

        min-height: auto;

        padding-top:
            calc(
                var(--header-height, 72px)
                + 3rem
            );

        padding-bottom: 4rem;

    }


    .page-label {

        margin-bottom: 1.5rem;

    }


    .capabilities-intro h1 {

        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );

    }


    .capabilities-intro p {

        font-size: 1rem;

        line-height: 1.7;

    }


    .capabilities-engine {

        height: 440px;

        margin-top: 3rem;

    }


    .capabilities-network-grid {

        background-size:
            36px 36px;

    }


    .capabilities-core {

        width: 140px;

        height: 140px;

    }


    .capabilities-core-center {

        width: 64px;

        height: 64px;

    }


    .capability-node {

        min-width: auto;

        padding:
            .55rem .75rem;

        font-size: .58rem;

    }


    .capability-node-cloud {

        top: 2%;

    }


    .capability-node-automation {

        top: 38%;

        right: 0;

    }


    .capability-node-intelligence {

        right: 2%;

        bottom: 3%;

    }


    .capability-node-development {

        left: 2%;

        bottom: 3%;

    }


    .capabilities-grid {

        grid-template-columns:
            1fr;

    }


    .capability-card {

        min-height: 430px;

    }


    .capabilities-system-intro,
    .capabilities-convergence,
    .capability-statement {

        padding:
            6rem 0;

    }


    .capability-flow-system {

        flex-direction: column;

        gap: .75rem;

    }


    .flow-connector {

        transform:
            rotate(90deg);

    }


    .convergence-diagram {

        min-height: 400px;

    }


    .convergence-node {

        width: 80px;

        height: 80px;

        font-size: .55rem;

    }


    .capabilities-cta {

        padding-bottom: 5rem;

    }


    .capabilities-cta-inner {

        padding: 2rem;

    }


}


/* =========================================================
   21. VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {


    .capabilities-engine {

        height: 380px;

    }


    .capability-node {

        transform:
            scale(.9);

    }


    .capability-node-cloud {

        left: 50%;

    }


    .capabilities-core {

        transform:
            translate(-50%, -50%)
            scale(.85);

    }


    .capabilities-cta-inner h2 {

        font-size: 2.2rem;

    }

}