/* ======================================================
   NAVBAR
====================================================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    z-index:1000;

    transition:var(--transition-normal);

}

.nav{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:1.4rem;

    font-weight:700;

    letter-spacing:.25rem;

    color:var(--color-white);

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:var(--space-5);

}

.nav-menu a{

    color:var(--color-text-secondary);

    font-size:.95rem;

    font-weight:500;

    transition:var(--transition-fast);

    position:relative;

}

.nav-menu a:hover{

    color:var(--color-white);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:var(--transition-fast);

}

.nav-menu a:hover::after{

    width:100%;

}

.menu-toggle{

    display:none;

}
.navbar.scrolled{

    background:rgba(5,8,22,.82);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.05);

}

/* ======================================================
   TRUST
====================================================== */



/* ======================================================
   CAPABILITIES
====================================================== */



/* ======================================================
   OUR VISION
====================================================== */



/* ======================================================
   PROJECTS
====================================================== */



/* ======================================================
   CTA
====================================================== */



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



/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width:992px){

.nav-menu{

display:none;

}

.nav .btn{

display:none;

}

.menu-toggle{

display:block;

color:var(--color-white);

font-size:2rem;

}

}
/* ======================================================
   OPENING EXPERIENCE
====================================================== */

.opening{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    padding-top:var(--header-height);

}

.opening-content{

    max-width:860px;

    margin:auto;

}

.opening .badge{

    margin-bottom:var(--space-4);

}

.opening h1{

    margin-bottom:var(--space-4);

}

.opening p{

    max-width:720px;

    margin-inline:auto;

    margin-bottom:var(--space-5);

}

.opening-actions{

    display:flex;

    justify-content:center;

    gap:var(--space-3);

    flex-wrap:wrap;

}

.opening-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:var(--space-7);

    min-height:100vh;

}
.opening-visual{

    display:flex;

    justify-content:center;

    align-items:center;

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


/* =========================================================
   SECTION
========================================================= */

.capabilities {

    position: relative;

    padding:
        clamp(6rem, 10vw, 9rem)
        0;

}


/* =========================================================
   BACKGROUND ATMOSPHERE
========================================================= */

.capabilities::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(37, 99, 235, .07),
            transparent 32%
        );

    opacity: .9;

}


.capabilities::after {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 1px;

    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(37, 99, 235, .12),
            transparent
        );

    opacity: .35;

}


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

.capabilities-header {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(180px, .35fr)
        minmax(0, 1fr);

    gap: 4rem;

    margin-bottom: 4rem;

}


.section-label {

    display: inline-flex;

    align-items: center;

    gap: .65rem;

    align-self: start;

    color: var(--color-primary);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .18rem;

    text-transform: uppercase;

}


.section-label-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--color-primary);

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

}


.capabilities-heading {

    max-width: 760px;

}


.section-title {

    margin: 0;

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

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.045em;

    color:
        var(--color-white);

}


.section-title span {

    display: block;

    color:
        var(--color-primary);

}


.section-description {

    max-width: 620px;

    margin:
        1.8rem 0 0;

    font-size:
        clamp(1rem, 1.4vw, 1.15rem);

    line-height: 1.8;

    color:
        var(--color-text-secondary);

}


/* =========================================================
   GRID
========================================================= */

.capabilities-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 1rem;

}


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

.capability-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 360px;

    padding: 2rem;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .035),
            rgba(255, 255, 255, .012)
        );

    overflow: hidden;

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

}


.capability-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

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

    opacity: 0;

    transition:
        opacity .35s ease;

}


.capability-card::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -100px;

    right: -100px;

    border-radius: 50%;

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

    opacity: 0;

    transition:
        opacity .4s ease;

}


/* =========================================================
   CARD HOVER
========================================================= */

.capability-card:hover {

    transform:
        translateY(-6px);

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

    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, .08),
            rgba(255, 255, 255, .018)
        );

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .25);

}


.capability-card:hover::before,
.capability-card:hover::after {

    opacity: 1;

}


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

.capability-card-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}


.capability-index {

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

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .12rem;

}


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

.capability-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

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

    border-radius: 12px;

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

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

}


.capability-icon svg {

    width: 30px;

    height: 30px;

    fill: none;

    stroke:
        var(--color-primary);

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.capability-card:hover
.capability-icon {

    transform:
        translateY(-3px);

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

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

}


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

.capability-content {

    margin-top: auto;

}


.capability-content h3 {

    margin: 0;

    font-size:
        1.15rem;

    font-weight: 600;

    line-height: 1.35;

    color:
        var(--color-white);

}


.capability-content p {

    margin:
        1rem 0 0;

    font-size:
        .92rem;

    line-height: 1.75;

    color:
        var(--color-text-secondary);

}


/* =========================================================
   CARD LINK
========================================================= */

.capability-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 2rem;

    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);

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

    font-size:
        .75rem;

    font-weight: 600;

    letter-spacing:
        .03rem;

    transition:
        color .3s ease;

}


.capability-arrow {

    color:
        var(--color-primary);

    font-size:
        1.1rem;

    transition:
        transform .3s ease;

}


.capability-card:hover
.capability-link {

    color:
        var(--color-white);

}


.capability-card:hover
.capability-arrow {

    transform:
        translateX(5px);

}


/* =========================================================
   FOOTER LINK
========================================================= */

.capabilities-footer {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    margin-top: 3rem;

}


.capabilities-more {

    display: inline-flex;

    align-items: center;

    gap: .8rem;

    color:
        var(--color-primary);

    font-size: .85rem;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .3s ease;

}


.capabilities-more-arrow {

    font-size:
        1.1rem;

    transition:
        transform .3s ease;

}


.capabilities-more:hover {

    color:
        var(--color-white);

}


.capabilities-more:hover
.capabilities-more-arrow {

    transform:
        translateX(5px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .capabilities-grid {

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

    }

}


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

@media (max-width: 768px) {

    .capabilities {

        padding:
            5rem 0;

    }


    .capabilities-header {

        grid-template-columns:
            1fr;

        gap: 1.5rem;

        margin-bottom: 3rem;

    }


    .capabilities-grid {

        grid-template-columns:
            1fr;

    }


    .capability-card {

        min-height: 320px;

        padding: 1.5rem;

    }


    .section-title {

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

    }

}
/* =========================================================
   ZBITVERSE
   OUR VISION
   Version: 1.0
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.vision {

    position: relative;

    padding:
        clamp(7rem, 12vw, 11rem)
        0;

}


/* =========================================================
   BACKGROUND
========================================================= */

.vision::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: 50%;

    right: -250px;

    transform:
        translateY(-50%);

    border-radius: 50%;

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

    pointer-events: none;

}


.vision::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(37, 99, 235, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37, 99, 235, .035) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 45%,
            transparent
        );

    opacity: .45;

}


/* =========================================================
   LAYOUT
========================================================= */

.vision-layout {

    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap:
        clamp(4rem, 8vw, 9rem);

}


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

.vision-content {

    max-width: 650px;

}


.vision-title {

    margin:
        2rem 0 0;

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

    font-weight: 700;

    line-height:
        1.03;

    letter-spacing:
        -.045em;

    color:
        var(--color-white);

}


.vision-title span {

    display: block;

    color:
        var(--color-primary);

}


.vision-description {

    max-width: 590px;

    margin:
        2rem 0 0;

    font-size:
        1rem;

    line-height:
        1.85;

    color:
        var(--color-text-secondary);

}


.vision-description + .vision-description {

    margin-top:
        1rem;

}


/* =========================================================
   LINK
========================================================= */

.vision-link {

    display: inline-flex;

    align-items: center;

    gap:
        .8rem;

    margin-top:
        2.5rem;

    color:
        var(--color-primary);

    font-size:
        .85rem;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .3s ease;

}


.vision-link-arrow {

    font-size:
        1.2rem;

    transition:
        transform .3s ease;

}


.vision-link:hover {

    color:
        var(--color-white);

}


.vision-link:hover
.vision-link-arrow {

    transform:
        translateX(6px);

}


/* =========================================================
   VISUAL
========================================================= */

.vision-visual {

    position: relative;

    min-height:
        560px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

}


/* =========================================================
   GRID
========================================================= */

.vision-grid {

    position: absolute;

    inset:
        5%;

    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:
        50px 50px;

    mask-image:
        radial-gradient(
            circle,
            black 15%,
            transparent 72%
        );

    opacity:
        .45;

}


/* =========================================================
   ORBIT
========================================================= */

.vision-orbit {

    position: relative;

    width:
        min(420px, 75vw);

    aspect-ratio:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


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

.vision-orbit-ring {

    position: absolute;

    top:
        50%;

    left:
        50%;

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

    border-radius:
        50%;

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

}


.vision-orbit-ring-outer {

    width:
        100%;

    height:
        100%;

    border-color:
        rgba(255, 255, 255, .10);

}


.vision-orbit-ring-middle {

    width:
        72%;

    height:
        72%;

}


.vision-orbit-ring-inner {

    width:
        45%;

    height:
        45%;

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

    box-shadow:
        0 0 35px
        rgba(37, 99, 235, .08);

}


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

.vision-core {

    position: relative;

    width:
        76px;

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        rgba(3, 7, 18, .85);

    box-shadow:
        0 0 40px
        rgba(37, 99, 235, .2);

}


.vision-core-glow {

    position: absolute;

    width:
        140px;

    height:
        140px;

    border-radius:
        50%;

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

}


.vision-core-point {

    position: relative;

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    background:
        var(--color-primary);

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

}


/* =========================================================
   NODES
========================================================= */

.vision-node {

    position: absolute;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #4cc9ff;

    box-shadow:
        0 0 15px
        rgba(76, 201, 255, .8);

}


.vision-node-top {

    top:
        0;

    left:
        50%;

    transform:
        translateX(-50%);

}


.vision-node-right {

    top:
        50%;

    right:
        0;

    transform:
        translateY(-50%);

}


.vision-node-bottom {

    bottom:
        0;

    left:
        50%;

    transform:
        translateX(-50%);

}


.vision-node-left {

    top:
        50%;

    left:
        0;

    transform:
        translateY(-50%);

}


/* =========================================================
   CONNECTION LINES
========================================================= */

.vision-orbit::before {

    content: "";

    position: absolute;

    top:
        50%;

    left:
        5%;

    width:
        90%;

    height:
        1px;

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

}


.vision-orbit::after {

    content: "";

    position: absolute;

    top:
        5%;

    left:
        50%;

    width:
        1px;

    height:
        90%;

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

}


/* =========================================================
   CAPTION
========================================================= */

.vision-caption {

    position: absolute;

    bottom:
        2rem;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        .7rem;

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

    font-size:
        .62rem;

    font-weight:
        600;

    letter-spacing:
        .15rem;

    white-space:
        nowrap;

}


.vision-caption-line {

    width:
        28px;

    height:
        1px;

    background:
        var(--color-primary);

}


/* =========================================================
   ANIMATION
========================================================= */

.vision-orbit-ring-outer {

    animation:
        visionRotate 30s linear infinite;

}


.vision-orbit-ring-middle {

    animation:
        visionRotateReverse 22s linear infinite;

}


.vision-orbit-ring-inner {

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

}


.vision-core {

    animation:
        visionCorePulse 3s ease-in-out infinite;

}


@keyframes visionRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes visionRotateReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}


@keyframes visionPulse {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }

}


@keyframes visionCorePulse {

    0%,
    100% {
        box-shadow:
            0 0 30px
            rgba(37, 99, 235, .18);
    }

    50% {
        box-shadow:
            0 0 55px
            rgba(37, 99, 235, .35);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .vision-layout {

        grid-template-columns:
            1fr;

        gap:
            4rem;

    }


    .vision-content {

        max-width:
            760px;

    }


    .vision-visual {

        min-height:
            500px;

    }

}


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

@media (max-width: 600px) {

    .vision {

        padding:
            5rem 0;

    }


    .vision-title {

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

    }


    .vision-visual {

        min-height:
            400px;

    }


    .vision-orbit {

        width:
            min(330px, 80vw);

    }


    .vision-caption {

        bottom:
            1rem;

        font-size:
            .5rem;

    }

}
/* =========================================================
   ZBITVERSE
   PROJECTS
   Version: 1.0
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.projects {

    position: relative;

    padding:
        clamp(7rem, 11vw, 10rem)
        0;

}


.projects::before {

    content: "";

    position: absolute;

    top: 20%;

    left: -250px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

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

    pointer-events: none;

}


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

.projects-header {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(180px, .35fr)
        minmax(0, 1fr);

    gap: 4rem;

    margin-bottom: 4rem;

}


.projects-heading {

    max-width: 760px;

}


/* =========================================================
   FEATURED PROJECT
========================================================= */

.project-featured {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    min-height: 520px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius:
        14px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .018);

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

}


.project-featured:hover {

    transform:
        translateY(-5px);

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

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .3);

}


/* =========================================================
   FEATURED VISUAL
========================================================= */

.project-featured-visual {

    position: relative;

    min-height: 520px;

    overflow: hidden;

    background:
        #030817;

}


.project-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.project-image-cloud {

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(37, 99, 235, .15),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #030817,
            #071127
        );

}


/* =========================================================
   IMAGE GRID
========================================================= */

.project-image-grid {

    position: absolute;

    inset: 0;

    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:
        45px 45px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 80%
        );

    opacity:
        .5;

}


/* =========================================================
   SERVER RACK
========================================================= */

.server-rack {

    position: absolute;

    top:
        50%;

    left:
        50%;

    width:
        180px;

    transform:
        translate(-50%, -50%)
        perspective(500px)
        rotateY(-12deg);

    padding:
        1.5rem;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    background:
        linear-gradient(
            145deg,
            rgba(20, 30, 55, .95),
            rgba(4, 10, 25, .98)
        );

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .5);

}


.server-rack span {

    display:
        block;

    height:
        22px;

    margin-bottom:
        .7rem;

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

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

}


.server-rack span:last-child {

    margin-bottom:
        0;

}


.server-rack span::after {

    content: "";

    display:
        block;

    width:
        5px;

    height:
        5px;

    margin:
        8px;

    border-radius:
        50%;

    background:
        #4cc9ff;

    box-shadow:
        0 0 10px
        rgba(76, 201, 255, .8);

}


/* =========================================================
   DATA LINES
========================================================= */

.project-data-line {

    position: absolute;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(76, 201, 255, .7),
            transparent
        );

    transform-origin:
        left center;

}


.project-data-line-one {

    width:
        280px;

    top:
        38%;

    left:
        50%;

    transform:
        rotate(-20deg);

}


.project-data-line-two {

    width:
        250px;

    top:
        62%;

    left:
        50%;

    transform:
        rotate(18deg);

}


.project-data-line-three {

    width:
        190px;

    top:
        50%;

    left:
        50%;

    transform:
        rotate(180deg);

}


/* =========================================================
   CLOUD CORE
========================================================= */

.project-cloud-core {

    position: absolute;

    top:
        50%;

    left:
        50%;

    width:
        90px;

    height:
        90px;

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

    border:
        1px solid
        rgba(76, 201, 255, .45);

    border-radius:
        50%;

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

}


.project-cloud-core div {

    position: absolute;

    top:
        50%;

    left:
        50%;

    width:
        14px;

    height:
        14px;

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

    border-radius:
        50%;

    background:
        #4cc9ff;

    box-shadow:
        0 0 25px
        rgba(76, 201, 255, .9);

}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.project-featured-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(2rem, 4vw, 4rem);

    border-left:
        1px solid
        rgba(255, 255, 255, .07);

}


.project-type {

    color:
        var(--color-primary);

    font-size:
        .65rem;

    font-weight:
        700;

    letter-spacing:
        .16rem;

}


.project-featured-content h3 {

    margin:
        1.5rem 0 0;

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

    line-height:
        1.08;

    letter-spacing:
        -.035em;

    color:
        var(--color-white);

}


.project-featured-content p {

    max-width:
        480px;

    margin:
        1.5rem 0 0;

    font-size:
        1rem;

    line-height:
        1.8;

    color:
        var(--color-text-secondary);

}


/* =========================================================
   TAGS
========================================================= */

.project-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        .5rem;

    margin-top:
        2rem;

}


.project-tags span {

    padding:
        .45rem .75rem;

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

    border-radius:
        999px;

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

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

    font-size:
        .65rem;

    font-weight:
        600;

}


/* =========================================================
   LINK
========================================================= */

.project-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        .8rem;

    width:
        fit-content;

    margin-top:
        2.5rem;

    color:
        var(--color-primary);

    font-size:
        .8rem;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .3s ease;

}


.project-link span:last-child {

    font-size:
        1.1rem;

    transition:
        transform .3s ease;

}


.project-link:hover {

    color:
        var(--color-white);

}


.project-link:hover span:last-child {

    transform:
        translateX(5px);

}


/* =========================================================
   PROJECT GRID
========================================================= */

.projects-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        1rem;

    margin-top:
        1rem;

}


/* =========================================================
   PROJECT CARD
========================================================= */

.project-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, .018);

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

}


.project-card:hover {

    transform:
        translateY(-5px);

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

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .25);

}


/* =========================================================
   CARD VISUAL
========================================================= */

.project-card-visual {

    position:
        relative;

    height:
        250px;

    overflow:
        hidden;

}


.project-image-automation {

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(37, 99, 235, .2),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #071126,
            #020714
        );

}


.automation-grid {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(37, 99, 235, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37, 99, 235, .08) 1px,
            transparent 1px
        );

    background-size:
        35px 35px;

}


.automation-arm {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        180px;

    height:
        90px;

    transform:
        translate(-50%, -50%)
        rotate(-20deg);

}


.automation-segment {

    position:
        absolute;

    top:
        50%;

    width:
        100px;

    height:
        8px;

    transform:
        translateY(-50%);

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #0b1835,
            #2563eb
        );

    border:
        1px solid
        rgba(76, 201, 255, .4);

}


.automation-segment:first-of-type {

    left:
        20px;

    transform:
        translateY(-50%)
        rotate(25deg);

}


.automation-segment:last-of-type {

    left:
        95px;

    transform:
        translateY(-50%)
        rotate(-25deg);

}


.automation-joint {

    position:
        absolute;

    width:
        22px;

    height:
        22px;

    border:
        2px solid
        #2563eb;

    border-radius:
        50%;

    background:
        #020714;

    box-shadow:
        0 0 18px
        rgba(37, 99, 235, .5);

}


.automation-joint:nth-child(1) {

    left:
        0;

    top:
        50%;

    transform:
        translateY(-50%);

}


.automation-joint:nth-child(3) {

    left:
        78px;

    top:
        50%;

    transform:
        translateY(-50%);

}


.automation-joint:nth-child(5) {

    right:
        0;

    top:
        50%;

    transform:
        translateY(-50%);

}


/* =========================================================
   INTELLIGENCE VISUAL
========================================================= */

.project-image-intelligence {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(37, 99, 235, .16),
            transparent 45%
        ),
        #030817;

}


.dashboard-frame {

    width:
        70%;

    height:
        65%;

    padding:
        1rem;

    border:
        1px solid
        rgba(76, 201, 255, .25);

    border-radius:
        8px;

    background:
        rgba(5, 15, 35, .9);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .45);

}


.dashboard-header {

    display:
        flex;

    gap:
        .35rem;

}


.dashboard-header span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        rgba(76, 201, 255, .8);

}


.dashboard-chart {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        .55rem;

    height:
        120px;

    margin-top:
        1.5rem;

}


.dashboard-chart i {

    display:
        block;

    flex:
        1;

    border-radius:
        3px 3px 0 0;

    background:
        linear-gradient(
            to top,
            #2563eb,
            #4cc9ff
        );

    opacity:
        .65;

}


.dashboard-chart i:nth-child(1) {
    height: 35%;
}

.dashboard-chart i:nth-child(2) {
    height: 55%;
}

.dashboard-chart i:nth-child(3) {
    height: 45%;
}

.dashboard-chart i:nth-child(4) {
    height: 75%;
}

.dashboard-chart i:nth-child(5) {
    height: 65%;
}

.dashboard-chart i:nth-child(6) {
    height: 90%;
}


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

.project-card-content {

    padding:
        2rem;

}


.project-card-content h3 {

    margin:
        .8rem 0 0;

    font-size:
        1.3rem;

    line-height:
        1.3;

    color:
        var(--color-white);

}


.project-card-content p {

    margin:
        .9rem 0 0;

    font-size:
        .9rem;

    line-height:
        1.7;

    color:
        var(--color-text-secondary);

}


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

.projects-footer {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        center;

    margin-top:
        3rem;

}


.projects-more {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        .8rem;

    color:
        var(--color-primary);

    font-size:
        .85rem;

    font-weight:
        600;

    text-decoration:
        none;

}


.projects-more span:last-child {

    font-size:
        1.15rem;

    transition:
        transform .3s ease;

}


.projects-more:hover {

    color:
        var(--color-white);

}


.projects-more:hover span:last-child {

    transform:
        translateX(5px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .projects-header {

        grid-template-columns:
            1fr;

        gap:
            1.5rem;

    }


    .project-featured {

        grid-template-columns:
            1fr;

    }


    .project-featured-visual {

        min-height:
            420px;

    }


    .project-featured-content {

        border-left:
            0;

        border-top:
            1px solid
            rgba(255, 255, 255, .07);

    }

}


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

@media (max-width: 650px) {

    .projects {

        padding:
            5rem 0;

    }


    .projects-grid {

        grid-template-columns:
            1fr;

    }


    .project-card-visual {

        height:
            220px;

    }


    .project-featured-visual {

        min-height:
            340px;

    }


    .project-featured-content {

        padding:
            1.5rem;

    }


    .project-card-content {

        padding:
            1.5rem;

    }

}
/* =========================================================
   ZBITVERSE
   CONTACT CTA
   Version: 1.0
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.contact-cta {

    position: relative;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

}


/* =========================================================
   PANEL
========================================================= */

.contact-cta-panel {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: center;

    gap: 4rem;

    min-height: 360px;

    padding:
        clamp(2.5rem, 5vw, 5rem);

    overflow: hidden;

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

    border-radius:
        14px;

    background:
        linear-gradient(
            120deg,
            rgba(7, 27, 75, .98),
            rgba(8, 30, 82, .88)
        );

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .3);

}


/* =========================================================
   GRID
========================================================= */

.contact-cta-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 85%
        );

    opacity:
        .5;

    pointer-events:
        none;

}


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

.contact-cta-glow {

    position: absolute;

    top:
        50%;

    right:
        18%;

    width:
        500px;

    height:
        500px;

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

    border-radius:
        50%;

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

    filter:
        blur(10px);

    pointer-events:
        none;

}


/* =========================================================
   ORBITS
========================================================= */

.contact-cta-orbit {

    position: absolute;

    top:
        50%;

    right:
        15%;

    width:
        280px;

    height:
        280px;

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

    border:
        1px solid
        rgba(76, 201, 255, .12);

    border-radius:
        50%;

    pointer-events:
        none;

}


.contact-cta-orbit-one {

    animation:
        contactOrbitOne
        18s
        linear
        infinite;

}


.contact-cta-orbit-two {

    width:
        180px;

    height:
        180px;

    border-color:
        rgba(76, 201, 255, .18);

    animation:
        contactOrbitTwo
        12s
        linear
        infinite reverse;

}


@keyframes contactOrbitOne {

    from {

        transform:
            translate(
                50%,
                -50%
            )
            rotate(0deg);

    }

    to {

        transform:
            translate(
                50%,
                -50%
            )
            rotate(360deg);

    }

}


@keyframes contactOrbitTwo {

    from {

        transform:
            translate(
                50%,
                -50%
            )
            rotate(0deg);

    }

    to {

        transform:
            translate(
                50%,
                -50%
            )
            rotate(360deg);

    }

}


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

.contact-cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        680px;

}


.contact-cta-label {

    display:
        inline-block;

    margin-bottom:
        1.25rem;

    color:
        #7eb4ff;

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .16rem;

}


.contact-cta-content h2 {

    margin:
        0;

    max-width:
        700px;

    color:
        var(--color-white);

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

    font-weight:
        700;

    line-height:
        1.05;

    letter-spacing:
        -.045em;

}


.contact-cta-content h2 span {

    display:
        block;

    color:
        #4c8dff;

}


.contact-cta-content p {

    max-width:
        570px;

    margin:
        1.5rem 0 0;

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

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   ACTION
========================================================= */

.contact-cta-action {

    position:
        relative;

    z-index:
        3;

}


.contact-cta-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1.5rem;

    min-width:
        220px;

    padding:
        1.1rem 1.5rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .85
        );

    border-radius:
        10px;

    background:
        var(--color-white);

    color:
        #071126;

    font-size:
        .9rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.contact-cta-button:hover {

    transform:
        translateY(-4px);

    background:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(
            0,
            0,
            0,
            .35
        );

}


.contact-cta-arrow {

    font-size:
        1.2rem;

    transition:
        transform .3s ease;

}


.contact-cta-button:hover
.contact-cta-arrow {

    transform:
        translateX(5px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .contact-cta-panel {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .contact-cta-action {

        justify-self:
            start;

    }


    .contact-cta-orbit {

        right:
            0;

        opacity:
            .5;

    }

}


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

@media (max-width: 600px) {

    .contact-cta {

        padding:
            5rem 0;

    }


    .contact-cta-panel {

        min-height:
            auto;

        padding:
            2rem;

    }


    .contact-cta-content h2 {

        font-size:
            2.4rem;

    }


    .contact-cta-content p {

        font-size:
            .9rem;

    }


    .contact-cta-button {

        width:
            100%;

    }


    .contact-cta-orbit {

        width:
            220px;

        height:
            220px;

        right:
            -100px;

        opacity:
            .25;

    }

}
/* =========================================================
   ZBITVERSE
   FOOTER
   Version: 1.0
========================================================= */


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

.site-footer {

    position: relative;

    background:
        #040813;

    border-top:
        1px solid
        rgba(255, 255, 255, .08);

    overflow: hidden;

}


/* =========================================================
   SUBTLE GRID
========================================================= */

.site-footer::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    pointer-events:
        none;

}


/* =========================================================
   MAIN
========================================================= */

.footer-main {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.8fr
        1fr
        1.2fr
        1fr
        1.2fr;

    gap:
        clamp(
            2rem,
            4vw,
            5rem
        );

    padding:
        5rem 0;

}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {

    max-width:
        300px;

}


.footer-logo {

    display:
        inline-block;

    color:
        var(--color-white);

    font-size:
        1.25rem;

    font-weight:
        700;

    letter-spacing:
        .18rem;

    text-decoration:
        none;

}


.footer-description {

    margin:
        1.5rem 0 0;

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

    font-size:
        .85rem;

    line-height:
        1.8;

}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social {

    display:
        flex;

    align-items:
        center;

    gap:
        .65rem;

    margin-top:
        1.75rem;

}


.footer-social a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:
        6px;

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

    font-size:
        .7rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;

}


.footer-social a:hover {

    color:
        var(--color-primary);

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

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

    transform:
        translateY(-3px);

}


/* =========================================================
   COLUMNS
========================================================= */

.footer-column h3 {

    margin:
        0 0 1.5rem;

    color:
        var(--color-white);

    font-size:
        .8rem;

    font-weight:
        600;

}


.footer-column ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        .75rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.footer-column li {

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

    font-size:
        .78rem;

}


.footer-column a {

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

    text-decoration:
        none;

    transition:
        color .25s ease;

}


.footer-column a:hover {

    color:
        var(--color-primary);

}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact li {

    display:
        flex;

    align-items:
        center;

    gap:
        .65rem;

}


.footer-contact-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        22px;

    color:
        var(--color-primary);

    font-size:
        .75rem;

}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    padding:
        1.5rem 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

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

    font-size:
        .7rem;

}


.footer-bottom-links {

    display:
        flex;

    gap:
        1.5rem;

}


.footer-bottom-links a {

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

    text-decoration:
        none;

    transition:
        color .25s ease;

}


.footer-bottom-links a:hover {

    color:
        var(--color-primary);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .footer-main {

        grid-template-columns:
            1.5fr 1fr 1fr;

    }

    .footer-brand {

        grid-column:
            1 / -1;

        max-width:
            500px;

    }

}


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

@media (max-width: 650px) {

    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            3rem 2rem;

        padding:
            4rem 0;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }


    .footer-column {

        min-width:
            0;

    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            1rem;

    }

}


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

@media (max-width: 420px) {

    .footer-main {

        grid-template-columns:
            1fr;

    }

    .footer-column {

        grid-column:
            1;

    }

}