.swimtics-ecosystem-intro::after {

    content: "";

    position: absolute;

    left: 24px;

    bottom: -42px;

    width: calc(100% - 24px);

    height: 1px;

    background:

        linear-gradient(
            90deg,
            rgba(0,217,255,.45),
            rgba(255,255,255,.08) 45%,
            transparent
        );

}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.swimtics-ecosystem-intro
.features-title {

    position: relative;

    margin: 0;

    font-family:
        Michroma,
        sans-serif;

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

    line-height:
        .95;

    letter-spacing:
        -2px;

    text-transform:
        uppercase;

    max-width:
        950px;

    color:
        #f2f7fa;

}


/* ---------------------------------------------------------
   TITLE ACCENT
   --------------------------------------------------------- */

.swimtics-ecosystem-intro
.features-title::after {

    content: "";

    display: block;

    width: 85px;

    height: 2px;

    margin-top: 28px;

    background:

        linear-gradient(
            90deg,
            #00d9ff,
            transparent
        );

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

}


/* ---------------------------------------------------------
   SUBTITLE
   --------------------------------------------------------- */

.swimtics-ecosystem-intro
.features-subtitle {

    max-width: 520px;

    margin-top: 30px;

    font-family:
        Inter,
        sans-serif;

    font-size:
        clamp(.9rem, 1.2vw, 1.05rem);

    line-height:
        1.7;

    color:
        rgba(235,242,248,.52);

}


/* =========================================================
   ECOSYSTEM CARD SYSTEM
   ========================================================= */

.feature-card {

    position: relative;

    min-height: 320px;

    overflow: hidden;

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

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        border-color .5s ease,
        background .5s ease;

}


/* ---------------------------------------------------------
   GIANT NUMBER
   --------------------------------------------------------- */

.feature-card::before {

    content: attr(data-system);

    position: absolute;

    top: -35px;

    right: 35px;

    font-family: Orbitron, sans-serif;

    font-size:
        clamp(11rem, 17vw, 17rem);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -15px;

    color:
        rgba(65, 155, 190, .085);

    pointer-events: none;

    z-index: 0;

}


/* ---------------------------------------------------------
   CARD NUMBER
   --------------------------------------------------------- */

.feature-card::after {

    content: attr(data-index);

    position: absolute;

    top: 28px;

    right: 30px;

    font-family:
        Rajdhani,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

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

}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.feature-card:hover {

    border-color:
        rgba(0,217,255,.28);

    background:

        linear-gradient(
            135deg,
            rgba(0,100,150,.10),
            rgba(255,255,255,.025)
        );

}


/* ---------------------------------------------------------
   CARD INNER DEPTH
   --------------------------------------------------------- */

.feature-card > * {

    position: relative;

    z-index: 2;

}


/* ---------------------------------------------------------
   CARD LIGHT
   --------------------------------------------------------- */

.swimtics-card-light {

    width: 320px;

    height: 320px;

    background:

        radial-gradient(
            circle,
            rgba(0,217,255,.13),
            rgba(0,120,255,.035) 35%,
            transparent 70%
        );

    filter:
        blur(30px);

}


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

.swimtics-border-sweep {

    height: 1px !important;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(0,217,255,.9),
            transparent
        ) !important;

}


/* =========================================================
   TECHNICAL CORNERS
   ========================================================= */

.feature-card .swimtics-tech-corner {

    position: absolute;

    width: 18px;

    height: 18px;

    z-index: 5;

    opacity: .5;

}


.feature-card .swimtics-tech-corner::before {

    content: "";

    position: absolute;

    width: 18px;

    height: 1px;

    background:
        rgba(0,217,255,.6);

}


.feature-card .swimtics-tech-corner::after {

    content: "";

    position: absolute;

    width: 1px;

    height: 18px;

    background:
        rgba(0,217,255,.6);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:800px) {

    .swimtics-ecosystem-intro {

        width: 88%;

        padding-left: 12px;

        margin-bottom: 65px;

    }


    .swimtics-ecosystem-intro::after {

        left: 12px;

        width: calc(100% - 12px);

    }


    .feature-card {

        min-height: 270px;

    }


    .feature-card::before {

        font-size:
            8rem;

    }

}


/* =================================================
           GLOBAL
           ================================================= */

        html {
            scroll-behavior: smooth;
        }


        body {
            overflow-x: hidden !important;
        }


        /* =================================================
           ECOSYSTEM INTRO
           ================================================= */

        .swimtics-ecosystem-intro {

            position: relative;

            width: min(1200px, 88%);

            margin: 0 auto 95px;

            padding-left: 24px;

        }


        .swimtics-ecosystem-intro::before {

    content: "";

    display: block;

    width: 85px;

    height: 2px;

    margin-bottom: 32px;

    background:
        linear-gradient(
            90deg,
            #00d9ff,
            rgba(0,217,255,.08),
            transparent
        );

    box-shadow:
        0 0 14px
        rgba(0,217,255,.35);

}


        .swimtics-ecosystem-intro::after {

            content: "";

            position: absolute;

            left: 24px;

            bottom: -42px;

            width: calc(100% - 24px);

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    rgba(0,217,255,.45),
                    rgba(255,255,255,.08) 45%,
                    transparent
                );

        }


        .swimtics-ecosystem-intro .features-title {

            position: relative;

            margin: 0;

            font-family: Michroma, sans-serif;

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

            line-height: .95;

            letter-spacing: -2px;

            text-transform: uppercase;

            max-width: 950px;

            color: #f2f7fa;

        }


        .swimtics-ecosystem-intro
        .features-title::after {

            content: "";

            display: block;

            width: 85px;

            height: 2px;

            margin-top: 28px;

            background:
                linear-gradient(
                    90deg,
                    #00d9ff,
                    transparent
                );

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

        }


        .swimtics-ecosystem-intro
        .features-subtitle {

            max-width: 520px;

            margin-top: 30px;

            font-family: Inter, sans-serif;

            font-size:
                clamp(.9rem, 1.2vw, 1.05rem);

            line-height: 1.7;

            color:
                rgba(235,242,248,.52);

        }


        /* =================================================
           FEATURE CARDS
           ================================================= */

        .feature-card {

            position: relative;

            min-height: 320px;

            overflow: hidden;

            transform-style: preserve-3d;

            will-change: transform;

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

            background:
                linear-gradient(
                    135deg,
                    rgba(255,255,255,.055),
                    rgba(255,255,255,.012)
                );

            backdrop-filter: blur(18px);

            -webkit-backdrop-filter: blur(18px);

            transition:
                border-color .5s ease,
                background .5s ease;

        }


        /* =================================================
           GIANT SYSTEM NUMBER
           ================================================= */

        .feature-card::before {

    content: attr(data-system);

    position: absolute;

    top: -35px;

    right: 35px;

    font-family: Orbitron, sans-serif;

    font-size:
        clamp(11rem, 17vw, 17rem);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -15px;

    color:
        rgba(65, 155, 190, .085);

    pointer-events: none;

    z-index: 0;

}


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

        .feature-card::after {

            content: attr(data-index);

            position: absolute;

            top: 28px;

            right: 30px;

            font-family: Rajdhani, sans-serif;

            font-size: 10px;

            font-weight: 600;

            letter-spacing: 3px;

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

            pointer-events: none;

            z-index: 5;

        }


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

        .feature-card > * {

            position: relative;

            z-index: 2;

        }


        /* =================================================
           TECHNICAL CORNER
           ================================================= */

        .feature-card .swimtics-tech-corner {

            position: absolute;

            width: 18px;

            height: 18px;

            top: 0;

            left: 0;

            z-index: 5;

            opacity: .5;

        }


        .feature-card
        .swimtics-tech-corner::before {

            content: "";

            position: absolute;

            width: 18px;

            height: 1px;

            background:
                rgba(0,217,255,.6);

        }


        .feature-card
        .swimtics-tech-corner::after {

            content: "";

            position: absolute;

            width: 1px;

            height: 18px;

            background:
                rgba(0,217,255,.6);

        }


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

        .swimtics-card-light {

            position: absolute;

            width: 320px;

            height: 320px;

            border-radius: 50%;

            pointer-events: none;

            background:
                radial-gradient(
                    circle,
                    rgba(0,217,255,.13),
                    rgba(0,120,255,.035) 35%,
                    transparent 70%
                );

            filter: blur(30px);

            opacity: 0;

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

            z-index: 0;

        }


        /* =================================================
           BORDER SWEEP
           ================================================= */

        .swimtics-border-sweep {

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(0,217,255,.9),
                    transparent
                );

            pointer-events: none;

            z-index: 6;

        }


        .feature-card:hover
        .swimtics-border-sweep {

            animation:
                swimticsBorderSweep .9s ease forwards;

        }


        @keyframes swimticsBorderSweep {

            from {
                left: -100%;
            }

            to {
                left: 100%;
            }

        }


        /* =================================================
           SCROLL PROGRESS
           ================================================= */

        #swimticsScrollProgress {

            position: fixed;

            top: 50%;

            right: 18px;

            width: 2px;

            height: 90px;

            transform:
                translateY(-50%);

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

            z-index: 999999;

            overflow: hidden;

        }


        #swimticsScrollProgress span {

            display: block;

            width: 100%;

            height: 0%;

            background:
                linear-gradient(
                    180deg,
                    #00d9ff,
                    rgba(0,217,255,.15)
                );

            box-shadow:
                0 0 12px
                rgba(0,217,255,.5);

        }


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

        @media(max-width:800px) {

            .swimtics-ecosystem-intro {

                width: 88%;

                padding-left: 12px;

                margin-bottom: 65px;

            }


            .swimtics-ecosystem-intro::after {

                left: 12px;

                width:
                    calc(100% - 12px);

            }


            .feature-card {

                min-height: 270px;

            }


            .feature-card::before {

                font-size: 8rem;

            }

        }

        /* =========================================================
   CHASE AI PERFORMANCE SHOWCASE
   ========================================================= */

.swimtics-chase-showcase {

    position: relative;

    width: 100%;

    min-height: 100vh;

    margin-top: 120px !important;

    padding:
        150px 0 130px;

    background:
        #020508;

    overflow: hidden;

}


/* ---------------------------------------------------------
   INNER
   --------------------------------------------------------- */