/* =========================================================
   PILOTYT — LANDING PAGE
   BLACK / RED PREMIUM DESIGN
   ========================================================= */


/* =========================================================
   PAGE LOADER
========================================================= */

.page-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        grid;

    place-items:
        center;

    background:
        #050505;

    transition:
        opacity 700ms ease,
        visibility 700ms ease;

}


.page-loader.loaded {

    opacity:
        0;

    visibility:
        hidden;

}


.loader-inner {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        28px;

}


.loader-logo {

    width:
        150px;

    max-width:
        60vw;

    height:
        auto;

    object-fit:
        contain;

    animation:
        loader-pulse 1.8s
        ease-in-out
        infinite;

}


.loader-line {

    width:
        150px;

    height:
        2px;

    overflow:
        hidden;

    background:
        #1c1c1c;

}


.loader-line span {

    display:
        block;

    width:
        45%;

    height:
        100%;

    background:
        var(--red);

    animation:
        loader-progress 1.2s
        ease-in-out
        infinite;

}


@keyframes loader-pulse {

    0%,
    100% {

        opacity:
            .65;

        transform:
            scale(.97);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1);

    }

}


@keyframes loader-progress {

    0% {

        transform:
            translateX(-150%);

    }

    100% {

        transform:
            translateX(350%);

    }

}


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

.site-header {

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

}


.site-header::after {

    content:
        "";

    position:
        absolute;

    top:
        81px;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .07
            ),
            transparent
        );

    pointer-events:
        none;

}


.brand {

    display:
        flex;

    align-items:
        center;

    width:
        150px;

    transition:
        transform var(--transition);

}


.brand:hover {

    transform:
        translateY(-1px);

}


.brand-logo {

    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        44px;

    object-fit:
        contain;

}


.nav-login {

    color:
        var(--text-secondary);

    font-size:
        15px;

    font-weight:
        600;

    transition:
        color var(--transition);

}


.nav-login:hover {

    color:
        var(--white);

}


.nav-cta {

    min-height:
        45px;

    padding:
        0 18px;

    border-radius:
        11px;

    font-size:
        14px;

}


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

.mobile-menu-button {

    display:
        none;

    width:
        42px;

    height:
        42px;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

    border:
        1px solid var(--border);

    border-radius:
        11px;

    background:
        var(--surface);

}


.mobile-menu-button span {

    width:
        17px;

    height:
        2px;

    background:
        var(--white);

    border-radius:
        2px;

    transition:
        transform var(--transition),
        opacity var(--transition);

}


.mobile-menu-button.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.mobile-menu-button.active span:nth-child(2) {

    opacity:
        0;

}


.mobile-menu-button.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


.mobile-menu {

    display:
        none;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position:
        relative;

    min-height:
        100vh;

    min-height:
        900px;

    display:
        flex;

    align-items:
        center;

    padding:
        150px 0 100px;

    overflow:
        hidden;

    background:
        #050505;

}


.hero-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .45;

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

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0,0,0,.85) 50%,
            transparent 100%
        );

}


.hero::before {

    content:
        "";

    position:
        absolute;

    top:
        -300px;

    left:
        50%;

    width:
        1000px;

    height:
        700px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(
                255,
                31,
                61,
                .10
            ) 0%,
            rgba(
                255,
                31,
                61,
                .035
            ) 35%,
            transparent 70%
        );

    filter:
        blur(25px);

    pointer-events:
        none;

}


.hero-red-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(30px);

}


.hero-red-glow-one {

    width:
        600px;

    height:
        600px;

    top:
        280px;

    right:
        -300px;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                31,
                61,
                .13
            ),
            transparent 68%
        );

    animation:
        glow-drift-one 10s
        ease-in-out
        infinite;

}


.hero-red-glow-two {

    width:
        500px;

    height:
        500px;

    left:
        -250px;

    bottom:
        -150px;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                31,
                61,
                .08
            ),
            transparent 68%
        );

    animation:
        glow-drift-two 12s
        ease-in-out
        infinite;

}


@keyframes glow-drift-one {

    0%,
    100% {

        transform:
            translate(
                0,
                0
            );

    }

    50% {

        transform:
            translate(
                -80px,
                60px
            );

    }

}


@keyframes glow-drift-two {

    0%,
    100% {

        transform:
            translate(
                0,
                0
            );

    }

    50% {

        transform:
            translate(
                70px,
                -50px
            );

    }

}


.hero-container {

    position:
        relative;

    z-index:
        2;

}


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

.hero-content {

    width:
        min(
            100%,
            850px
        );

    margin:
        0 auto;

    text-align:
        center;

}


.hero-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        36px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(
            255,
            31,
            61,
            .24
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            31,
            61,
            .06
        );

    color:
        #ff6b7c;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


.eyebrow-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--red);

    box-shadow:
        0 0 14px
        rgba(
            255,
            31,
            61,
            .9
        );

    animation:
        pulse-red 2s
        ease-in-out
        infinite;

}


.hero-title {

    max-width:
        1050px;

    margin:
        34px auto 0;

    font-family:
        Inter,
        sans-serif;

    font-size:
        clamp(
            68px,
            8.8vw,
            124px
        );

    line-height:
        .91;

    font-weight:
        800;

    letter-spacing:
        -.075em;

    color:
        var(--white);

}


.hero-title-red {

    display:
        block;

    margin-top:
        8px;

    background:
        linear-gradient(
            105deg,
            #ff6c7d 0%,
            #ff1f3d 45%,
            #b70d24 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-description {

    max-width:
        720px;

    margin:
        34px auto 0;

    color:
        #a6a6a6;

    font-size:
        20px;

    line-height:
        1.65;

}


.hero-actions {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        36px;

}


.hero-primary-btn {

    min-width:
        190px;

}


.button-arrow {

    display:
        inline-block;

    font-size:
        20px;

    transition:
        transform var(--transition);

}


.btn:hover .button-arrow {

    transform:
        translateX(4px);

}


.hero-trust {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    margin-top:
        26px;

    color:
        #777;

    font-size:
        14px;

}


.trust-avatars {

    display:
        flex;

    padding-left:
        8px;

}


.trust-avatar {

    width:
        29px;

    height:
        29px;

    margin-left:
        -8px;

    display:
        grid;

    place-items:
        center;

    border:
        2px solid
        #050505;

    border-radius:
        50%;

    background:
        #191919;

    color:
        #d5d5d5;

    font-size:
        10px;

    font-weight:
        800;

}


.trust-avatar:nth-child(2) {

    background:
        #292929;

}


.trust-avatar:nth-child(3) {

    background:
        #3b161b;

    color:
        #ff7b89;

}


.trust-avatar:nth-child(4) {

    background:
        var(--red);

    color:
        white;

}


/* =========================================================
   HERO PRODUCT
========================================================= */

.hero-product {

    position:
        relative;

    width:
        min(
            100%,
            1100px
        );

    margin:
        95px auto 0;

    perspective:
        1400px;

}


.product-glow {

    position:
        absolute;

    width:
        70%;

    height:
        300px;

    left:
        15%;

    bottom:
        -80px;

    background:
        radial-gradient(
            ellipse,
            rgba(
                255,
                31,
                61,
                .22
            ),
            transparent 70%
        );

    filter:
        blur(40px);

    pointer-events:
        none;

}


.dashboard-window {

    position:
        relative;

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

    border-radius:
        20px;

    overflow:
        hidden;

    background:
        #090909;

    box-shadow:
        0 50px 120px
        rgba(
            0,
            0,
            0,
            .7
        ),
        0 0 80px
        rgba(
            255,
            31,
            61,
            .06
        );

    transform:
        rotateX(2deg);

    transition:
        transform 800ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}


.hero-product:hover .dashboard-window {

    transform:
        rotateX(0deg)
        translateY(-5px);

}


/* =========================================================
   WINDOW BAR
========================================================= */

.window-top {

    height:
        46px;

    display:
        grid;

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

    align-items:
        center;

    padding:
        0 17px;

    border-bottom:
        1px solid
        #1d1d1d;

    background:
        #0d0d0d;

}


.window-dots {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


.window-dots span {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #292929;

}


.window-dots span:first-child {

    background:
        #55202a;

}


.window-address {

    justify-self:
        center;

    min-width:
        240px;

    padding:
        5px 14px;

    border:
        1px solid
        #1d1d1d;

    border-radius:
        7px;

    background:
        #090909;

    color:
        #5c5c5c;

    font-size:
        10px;

    text-align:
        center;

}


.window-placeholder {

    width:
        20px;

}


/* =========================================================
   MOCK DASHBOARD
========================================================= */

.mock-dashboard {

    display:
        grid;

    grid-template-columns:
        170px 1fr;

    min-height:
        550px;

}


/* SIDEBAR */

.mock-sidebar {

    display:
        flex;

    flex-direction:
        column;

    padding:
        18px 12px;

    border-right:
        1px solid
        #191919;

    background:
        #080808;

}


.mock-sidebar-logo {

    height:
        35px;

    padding:
        0 9px;

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        27px;

}


.mock-sidebar-logo img {

    width:
        86px;

    max-height:
        28px;

    object-fit:
        contain;

}


.mock-nav {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.mock-nav-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        39px;

    padding:
        0 10px;

    border-radius:
        8px;

    color:
        #686868;

    font-size:
        10px;

    font-weight:
        600;

}


.mock-nav-item.active {

    background:
        rgba(
            255,
            31,
            61,
            .09
        );

    color:
        #ff596c;

}


.mock-icon {

    width:
        15px;

    color:
        inherit;

    font-size:
        11px;

    text-align:
        center;

}


.mock-sidebar-bottom {

    margin-top:
        auto;

}


/* MAIN */

.mock-main {

    min-width:
        0;

    padding:
        26px;

    background:
        #0a0a0a;

}


.mock-main-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.mock-small-label {

    margin-bottom:
        5px;

    color:
        #555;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .14em;

}


.mock-main-top h3 {

    font-size:
        21px;

    line-height:
        1.2;

    font-weight:
        700;

    letter-spacing:
        -.035em;

}


.mock-profile {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #2a2a2a;

    border-radius:
        50%;

    background:
        #171717;

    color:
        #aaa;

    font-size:
        10px;

    font-weight:
        700;

}


/* STATS */

.mock-stat-grid {

    display:
        grid;

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

    gap:
        10px;

    margin-top:
        20px;

}


.mock-stat-card {

    min-height:
        92px;

    padding:
        14px;

    border:
        1px solid
        #1c1c1c;

    border-radius:
        11px;

    background:
        #0e0e0e;

}


.mock-stat-card > span {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #5c5c5c;

    font-size:
        9px;

}


.mock-stat-card strong {

    display:
        block;

    color:
        #f0f0f0;

    font-size:
        24px;

    line-height:
        1;

    letter-spacing:
        -.04em;

}


.mock-stat-card small {

    display:
        block;

    margin-top:
        7px;

    color:
        #666;

    font-size:
        8px;

}


.mock-stat-card small.positive {

    color:
        #4bd48b;

}


.mock-stat-card .red-number {

    color:
        var(--red);

}


/* CHART */

.mock-chart-card {

    margin-top:
        10px;

    padding:
        17px;

    border:
        1px solid
        #1c1c1c;

    border-radius:
        11px;

    background:
        #0e0e0e;

}


.mock-card-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.mock-card-header span {

    display:
        block;

    color:
        #5a5a5a;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .1em;

}


.mock-card-header strong {

    display:
        block;

    margin-top:
        4px;

    color:
        #aaa;

    font-size:
        11px;

    font-weight:
        600;

}


.mock-chart-filter {

    padding:
        5px 8px;

    border:
        1px solid
        #252525;

    border-radius:
        5px;

    color:
        #777;

    font-size:
        8px;

}


.mock-chart {

    position:
        relative;

    height:
        145px;

    margin-top:
        15px;

    overflow:
        hidden;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 35px,
            rgba(
                255,
                255,
                255,
                .035
            ) 36px
        );

}


.chart-line {

    position:
        absolute;

    left:
        2%;

    right:
        0;

    top:
        62%;

    height:
        2px;

    background:
        var(--red);

    clip-path:
        polygon(
            0 70%,
            9% 64%,
            18% 70%,
            27% 48%,
            35% 56%,
            43% 32%,
            52% 45%,
            61% 27%,
            70% 39%,
            78% 15%,
            87% 25%,
            100% 0,
            100% 100%,
            0 100%
        );

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

}


.chart-area {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(
                255,
                31,
                61,
                .13
            ),
            transparent 70%
        );

    clip-path:
        polygon(
            0 75%,
            9% 69%,
            18% 75%,
            27% 53%,
            35% 61%,
            43% 37%,
            52% 50%,
            61% 32%,
            70% 44%,
            78% 20%,
            87% 30%,
            100% 5%,
            100% 100%,
            0 100%
        );

}


.chart-dot {

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    border:
        2px solid
        #0e0e0e;

    border-radius:
        50%;

    background:
        var(--red);

    box-shadow:
        0 0 10px
        rgba(
            255,
            31,
            61,
            .5
        );

}


.dot-one {

    left:
        27%;

    top:
        52%;

}


.dot-two {

    left:
        43%;

    top:
        36%;

}


.dot-three {

    left:
        61%;

    top:
        31%;

}


.dot-four {

    left:
        78%;

    top:
        19%;

}


.dot-five {

    right:
        0;

    top:
        5%;

}


/* AI CARD */

.mock-ai-card {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        10px;

    padding:
        13px;

    border:
        1px solid
        rgba(
            255,
            31,
            61,
            .16
        );

    border-radius:
        11px;

    background:
        linear-gradient(
            100deg,
            rgba(
                255,
                31,
                61,
                .08
            ),
            rgba(
                255,
                31,
                61,
                .025
            )
        );

}


.ai-icon {

    flex:
        0 0 auto;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        rgba(
            255,
            31,
            61,
            .14
        );

    color:
        #ff4d65;

    font-size:
        13px;

}


.ai-content {

    min-width:
        0;

}


.ai-content span {

    color:
        #ff596d;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .1em;

}


.ai-content p {

    margin-top:
        4px;

    color:
        #858585;

    font-size:
        9px;

    line-height:
        1.4;

}


.ai-content b {

    color:
        #d4d4d4;

}


.ai-arrow {

    margin-left:
        auto;

    color:
        #666;

    font-size:
        15px;

}


/* =========================================================
   FLOATING INSIGHT
========================================================= */

.floating-insight {

    position:
        absolute;

    right:
        -35px;

    bottom:
        50px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-width:
        230px;

    padding:
        13px 14px;

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

    border-radius:
        13px;

    background:
        rgba(
            14,
            14,
            14,
            .92
        );

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

    backdrop-filter:
        blur(15px);

    animation:
        float 5s
        ease-in-out
        infinite;

}


.floating-icon {

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        rgba(
            255,
            31,
            61,
            .12
        );

    color:
        #ff4b61;

}


.floating-insight > div:nth-child(2) {

    display:
        flex;

    flex-direction:
        column;

}


.floating-insight span {

    color:
        #6a6a6a;

    font-size:
        8px;

}


.floating-insight strong {

    margin-top:
        2px;

    color:
        #ddd;

    font-size:
        11px;

}


.floating-arrow {

    margin-left:
        auto;

    color:
        #555 !important;

    font-size:
        14px !important;

}


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

.hero-orbit {

    position:
        absolute;

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

    border-radius:
        50%;

    pointer-events:
        none;

}


.orbit-one {

    width:
        850px;

    height:
        300px;

    left:
        50%;

    bottom:
        -100px;

    transform:
        translateX(-50%)
        rotate(-7deg);

}


.orbit-two {

    width:
        1000px;

    height:
        400px;

    left:
        50%;

    bottom:
        -150px;

    transform:
        translateX(-50%)
        rotate(6deg);

    opacity:
        .55;

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position:
        absolute;

    bottom:
        30px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        5px;

    color:
        #555;

    font-size:
        11px;

    letter-spacing:
        .03em;

    transition:
        color var(--transition);

}


.scroll-indicator:hover {

    color:
        #999;

}


.scroll-arrow {

    color:
        var(--red);

    font-size:
        16px;

    animation:
        scroll-bounce 1.8s
        ease-in-out
        infinite;

}


@keyframes scroll-bounce {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(5px);

    }

}


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

.statement-section {

    position:
        relative;

    padding:
        180px 0 150px;

    overflow:
        hidden;

}


.statement-section::before {

    content:
        "";

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    right:
        -300px;

    top:
        0;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                31,
                61,
                .06
            ),
            transparent 70%
        );

}


.statement-content {

    max-width:
        1050px;

}


.statement-description {

    max-width:
        680px;

    margin-top:
        38px;

}


/* =========================================================
   FEATURES
========================================================= */

.features-section {

    background:
        #070707;

}


.features-section::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        1px;

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

}


.features-grid {

    display:
        grid;

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

    gap:
        16px;

}


.feature-card {

    position:
        relative;

    min-height:
        550px;

    padding:
        38px;

    border:
        1px solid
        #1e1e1e;

    border-radius:
        25px;

    overflow:
        hidden;

    background:
        #0b0b0b;

    transition:
        transform 500ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        border-color 400ms ease,
        box-shadow 400ms ease;

}


.feature-card:hover {

    transform:
        translateY(-7px);

    border-color:
        #2c2c2c;

    box-shadow:
        0 35px 80px
        rgba(
            0,
            0,
            0,
            .4
        );

}


.feature-card-large {

    min-height:
        620px;

}


.feature-card-red {

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(
                255,
                31,
                61,
                .14
            ),
            transparent 42%
        ),
        #0b0b0b;

}


.feature-card-title {

    min-height:
        580px;

}


.feature-card-strategy {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    min-height:
        580px;

}


.feature-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        500px;

}


.feature-number {

    margin-bottom:
        80px;

    color:
        #4a4a4a;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .1em;

}


.feature-content h3 {

    max-width:
        500px;

    font-size:
        clamp(
            30px,
            3vw,
            46px
        );

    line-height:
        1.02;

    letter-spacing:
        -.045em;

    font-weight:
        750;

}


.feature-content p {

    max-width:
        450px;

    margin-top:
        20px;

    color:
        #858585;

    font-size:
        17px;

    line-height:
        1.6;

}


.feature-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        28px;

    color:
        #f1f1f1;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        color var(--transition);

}


.feature-link span {

    color:
        var(--red);

    font-size:
        17px;

    transition:
        transform var(--transition);

}


.feature-link:hover {

    color:
        var(--red);

}


.feature-link:hover span {

    transform:
        translateX(4px);

}


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

.analytics-visual {

    position:
        absolute;

    left:
        38px;

    right:
        38px;

    bottom:
        0;

    height:
        270px;

    border:
        1px solid
        #1d1d1d;

    border-bottom:
        0;

    border-radius:
        17px 17px 0 0;

    background:
        #090909;

    overflow:
        hidden;

}


.analytics-visual::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 49px,
            rgba(
                255,
                255,
                255,
                .03
            ) 50px
        );

}


.mini-chart {

    position:
        absolute;

    left:
        25px;

    right:
        25px;

    bottom:
        30px;

    height:
        170px;

}


.mini-chart-line {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 8%,
            rgba(
                255,
                31,
                61,
                .9
            ) 8.5%,
            rgba(
                255,
                31,
                61,
                .9
            ) 9%,
            transparent 9.5%,
            transparent 17%,
            rgba(
                255,
                31,
                61,
                .9
            ) 17.5%,
            rgba(
                255,
                31,
                61,
                .9
            ) 18%,
            transparent 18.5%,
            transparent 29%,
            rgba(
                255,
                31,
                61,
                .9
            ) 29.5%,
            rgba(
                255,
                31,
                61,
                .9
            ) 30%,
            transparent 30.5%,
            transparent 42%,
            rgba(
                255,
                31,
                61,
                .9
            ) 42.5%,
            rgba(
                255,
                31,
                61,
                .9
            ) 43%,
            transparent 43.5%,
            transparent 55%,
            rgba(
                255,
                31,
                61,
                .9
            ) 55.5%,
            rgba(
                255,
                31,
                61,
                .9
            ) 56%,
            transparent 56.5%,
            transparent 68%,
            rgba(
                255,
                31,
                61,
                .9
            ) 68.5%,
            rgba(
                255,
                31,
                61,
                .9
            ) 69%,
            transparent 69.5%,
            transparent 81%,
            rgba(
                255,
                31,
                61,
                .9
            ) 81.5%,
            rgba(
                255,
                31,
                61,
                .9
            ) 82%,
            transparent 82.5%
        );

    opacity:
        .7;

}


.mini-stat {

    position:
        absolute;

    padding:
        13px 15px;

    border:
        1px solid
        #252525;

    border-radius:
        10px;

    background:
        rgba(
            14,
            14,
            14,
            .9
        );

    backdrop-filter:
        blur(10px);

}


.mini-stat span {

    display:
        block;

    color:
        #5f5f5f;

    font-size:
        8px;

}


.mini-stat strong {

    display:
        block;

    margin-top:
        4px;

    color:
        white;

    font-size:
        17px;

}


.stat-a {

    top:
        35px;

    right:
        35px;

}


.stat-b {

    top:
        105px;

    right:
        120px;

}


.stat-b strong {

    color:
        #4bd48b;

}


/* =========================================================
   AI ORB
========================================================= */

.ai-orb-visual {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

}


.ai-orb {

    position:
        relative;

    z-index:
        4;

    width:
        130px;

    height:
        130px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ff7181,
            #ff1f3d 35%,
            #6d0a1a 75%
        );

    box-shadow:
        0 0 80px
        rgba(
            255,
            31,
            61,
            .4
        );

    animation:
        ai-orb-pulse 4s
        ease-in-out
        infinite;

}


.ai-orb span {

    color:
        white;

    font-size:
        40px;

    text-shadow:
        0 0 30px
        rgba(
            255,
            255,
            255,
            .5
        );

}


.orb-ring {

    position:
        absolute;

    border:
        1px solid
        rgba(
            255,
            31,
            61,
            .25
        );

    border-radius:
        50%;

}


.ring-a {

    width:
        230px;

    height:
        230px;

    animation:
        ring-spin 12s
        linear
        infinite;

}


.ring-b {

    width:
        340px;

    height:
        180px;

    transform:
        rotate(30deg);

    animation:
        ring-spin-reverse 16s
        linear
        infinite;

}


.ring-c {

    width:
        410px;

    height:
        410px;

    border-color:
        rgba(
            255,
            31,
            61,
            .08
        );

    animation:
        ring-spin 20s
        linear
        infinite;

}


@keyframes ai-orb-pulse {

    0%,
    100% {

        transform:
            scale(1);

        box-shadow:
            0 0 65px
            rgba(
                255,
                31,
                61,
                .3
            );

    }

    50% {

        transform:
            scale(1.05);

        box-shadow:
            0 0 100px
            rgba(
                255,
                31,
                61,
                .5
            );

    }

}


@keyframes ring-spin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes ring-spin-reverse {

    from {

        transform:
            rotate(30deg);

    }

    to {

        transform:
            rotate(-330deg);

    }

}


/* =========================================================
   TITLE STACK
========================================================= */

.title-stack {

    position:
        absolute;

    left:
        50%;

    bottom:
        40px;

    width:
        80%;

    height:
        260px;

    transform:
        translateX(-50%);

}


.title-card {

    position:
        absolute;

    left:
        50%;

    width:
        100%;

    padding:
        20px;

    border:
        1px solid
        #292929;

    border-radius:
        14px;

    background:
        #111;

    color:
        #888;

    font-size:
        14px;

    font-weight:
        600;

    transform:
        translateX(-50%);

}


.title-card-back {

    top:
        0;

    transform:
        translateX(-50%)
        scale(.91);

    opacity:
        .35;

}


.title-card-middle {

    top:
        45px;

    transform:
        translateX(-50%)
        scale(.95);

    opacity:
        .55;

}


.title-card-front {

    top:
        95px;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        #ededed;

    background:
        #161616;

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

}


.title-card-front > span {

    flex:
        0 0 auto;

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        rgba(
            255,
            31,
            61,
            .13
        );

    color:
        #ff5267;

    font-size:
        13px;

    font-weight:
        800;

}


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

.strategy-visual {

    position:
        relative;

    height:
        270px;

    margin-bottom:
        35px;

}


.strategy-node {

    position:
        absolute;

    display:
        grid;

    place-items:
        center;

    width:
        90px;

    height:
        90px;

    border:
        1px solid
        #2a2a2a;

    border-radius:
        50%;

    background:
        #111;

    color:
        #777;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .1em;

}


.node-one {

    top:
        10px;

    left:
        10%;

}


.node-two {

    top:
        100px;

    left:
        45%;

    border-color:
        rgba(
            255,
            31,
            61,
            .45
        );

    background:
        rgba(
            255,
            31,
            61,
            .07
        );

    color:
        #ff596c;

    box-shadow:
        0 0 50px
        rgba(
            255,
            31,
            61,
            .12
        );

}


.node-three {

    top:
        10px;

    right:
        10%;

}


.strategy-line {

    position:
        absolute;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            #242424,
            var(--red),
            #242424
        );

    transform-origin:
        left center;

}


.line-one {

    width:
        190px;

    left:
        25%;

    top:
        83px;

    transform:
        rotate(25deg);

}


.line-two {

    width:
        190px;

    right:
        25%;

    top:
        122px;

    transform:
        rotate(-25deg);

}


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

.tools-section {

    position:
        relative;

    background:
        #050505;

    overflow:
        hidden;

}


.tools-background {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 15% 55%,
            rgba(
                255,
                31,
                61,
                .055
            ),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(
                255,
                31,
                61,
                .045
            ),
            transparent 35%
        );

}


.tools-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        16px;

}


.tool-card {

    position:
        relative;

    min-height:
        570px;

    padding:
        35px;

    border:
        1px solid
        #202020;

    border-radius:
        25px;

    overflow:
        hidden;

    background:
        #0b0b0b;

    transition:
        transform 500ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        border-color 400ms ease,
        box-shadow 400ms ease;

}


.tool-card:hover {

    transform:
        translateY(-8px);

    border-color:
        #343434;

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

}


.tool-card::after {

    content:
        "";

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    right:
        -180px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                31,
                61,
                .12
            ),
            transparent 70%
        );

}


.tool-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.tool-badge {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        27px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(
            255,
            31,
            61,
            .25
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            31,
            61,
            .07
        );

    color:
        #ff5a6c;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .1em;

}


.tool-arrow {

    color:
        #555;

    font-size:
        24px;

    transition:
        color var(--transition),
        transform var(--transition);

}


.tool-card:hover .tool-arrow {

    color:
        var(--red);

    transform:
        translate(
            3px,
            -3px
        );

}


.tool-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        520px;

    margin-top:
        100px;

}


.tool-icon {

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            31,
            61,
            .24
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            31,
            61,
            .07
        );

    color:
        #ff5166;

    font-size:
        21px;

}


.tool-content h3 {

    margin-top:
        24px;

    font-size:
        38px;

    line-height:
        1.05;

    letter-spacing:
        -.04em;

}


.tool-content p {

    max-width:
        470px;

    margin-top:
        16px;

    color:
        #858585;

    font-size:
        17px;

    line-height:
        1.65;

}


/* TOOL PREVIEWS */

.tool-preview {

    position:
        absolute;

    left:
        35px;

    right:
        35px;

    bottom:
        0;

    height:
        210px;

    padding:
        25px;

    border:
        1px solid
        #1e1e1e;

    border-bottom:
        0;

    border-radius:
        16px 16px 0 0;

    background:
        #090909;

}


.preview-score {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        15px;

}


.preview-score span {

    margin-bottom:
        8px;

    color:
        #555;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


.preview-score strong {

    color:
        var(--red);

    font-size:
        55px;

    line-height:
        .8;

    letter-spacing:
        -.06em;

}


.preview-bars {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin-top:
        30px;

}


.preview-bars div {

    height:
        5px;

    border-radius:
        999px;

    background:
        #181818;

    overflow:
        hidden;

}


.preview-bars span {

    display:
        block;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--red-dark),
            var(--red)
        );

}


/* TITLE PREVIEW */

.title-preview {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    padding:
        20px;

}


.generated-title {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px;

    border:
        1px solid
        #262626;

    border-radius:
        10px;

    background:
        #111;

    color:
        #ddd;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.35;

}


.generated-title span {

    flex:
        0 0 auto;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        rgba(
            255,
            31,
            61,
            .12
        );

    color:
        #ff5367;

    font-size:
        10px;

    font-weight:
        800;

}


.generated-title.faded {

    opacity:
        .4;

}


/* TOOLS BOTTOM */

.tools-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        25px;

    color:
        #555;

    font-size:
        13px;

}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {

    background:
        #080808;

}


.steps {

    display:
        grid;

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

    gap:
        0;

    border-top:
        1px solid
        #242424;

}


.step {

    position:
        relative;

    min-height:
        330px;

    padding:
        45px 40px 30px 0;

}


.step:not(:last-child) {

    margin-right:
        40px;

    border-right:
        1px solid
        #202020;

}


.step-number {

    color:
        var(--red);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.step-line {

    width:
        100%;

    height:
        1px;

    margin-top:
        25px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            transparent
        );

    opacity:
        .35;

}


.step h3 {

    margin-top:
        45px;

    font-size:
        34px;

    line-height:
        1;

    letter-spacing:
        -.04em;

}


.step p {

    max-width:
        330px;

    margin-top:
        17px;

    color:
        #777;

    font-size:
        16px;

    line-height:
        1.6;

}


/* =========================================================
   WHY PILOTYT
========================================================= */

.why-section {

    background:
        #050505;

}


.why-layout {

    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        120px;

}


.why-heading {

    position:
        sticky;

    top:
        120px;

    align-self:
        start;

}


.why-content {

    border-top:
        1px solid
        #252525;

}


.why-item {

    display:
        grid;

    grid-template-columns:
        70px 1fr;

    gap:
        25px;

    padding:
        40px 0;

    border-bottom:
        1px solid
        #1e1e1e;

}


.why-index {

    color:
        #4e4e4e;

    font-size:
        12px;

    font-weight:
        800;

}


.why-item h3 {

    font-size:
        27px;

    line-height:
        1.1;

    letter-spacing:
        -.03em;

}


.why-item p {

    max-width:
        500px;

    margin-top:
        12px;

    color:
        #777;

    font-size:
        17px;

    line-height:
        1.6;

}


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

.final-cta {

    position:
        relative;

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    border-top:
        1px solid
        #1b1b1b;

    background:
        #070707;

}


.final-cta::before {

    content:
        "";

    position:
        absolute;

    width:
        900px;

    height:
        600px;

    left:
        50%;

    top:
        50%;

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

    background:
        radial-gradient(
            ellipse,
            rgba(
                255,
                31,
                61,
                .16
            ),
            transparent 67%
        );

    filter:
        blur(20px);

}


.final-cta::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    opacity:
        .25;

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

    background-size:
        80px 80px;

}


.cta-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        50%;

    top:
        50%;

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

    border:
        1px solid
        rgba(
            255,
            31,
            61,
            .09
        );

    border-radius:
        50%;

    box-shadow:
        0 0 0 80px
        rgba(
            255,
            31,
            61,
            .025
        ),
        0 0 0 160px
        rgba(
            255,
            31,
            61,
            .015
        );

}


.cta-content {

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    text-align:
        center;

}


.cta-content .section-label {

    justify-content:
        center;

}


.cta-content h2 {

    max-width:
        1100px;

    margin:
        25px auto 0;

}


.cta-content h2 span {

    color:
        var(--red);

}


.cta-content .body-lg {

    max-width:
        620px;

    margin:
        30px auto 0;

}


.cta-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        36px;

}


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

.site-footer {

    padding:
        75px 0 30px;

    background:
        #030303;

}


.footer-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        80px;

    padding-bottom:
        70px;

}


.footer-brand {

    max-width:
        300px;

}


.footer-logo {

    width:
        150px;

    max-height:
        45px;

    object-fit:
        contain;

}


.footer-brand p {

    margin-top:
        18px;

    color:
        #666;

    font-size:
        15px;

    line-height:
        1.6;

}


.footer-links-group {

    display:
        flex;

    gap:
        90px;

}


.footer-links-group > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

    min-width:
        120px;

}


.footer-links-group span {

    margin-bottom:
        7px;

    color:
        #444;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


.footer-links-group a {

    color:
        #777;

    font-size:
        14px;

    transition:
        color var(--transition);

}


.footer-links-group a:hover {

    color:
        white;

}


.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    padding-top:
        25px;

    border-top:
        1px solid
        #171717;

    color:
        #444;

    font-size:
        12px;

}


/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (
    max-width: 1100px
) {

    .hero {

        min-height:
            auto;

        padding-bottom:
            130px;

    }


    .hero-title {

        font-size:
            clamp(
                62px,
                9vw,
                100px
            );

    }


    .floating-insight {

        right:
            -10px;

    }


    .feature-card {

        padding:
            30px;

    }


    .analytics-visual {

        left:
            30px;

        right:
            30px;

    }


    .tool-card {

        padding:
            30px;

    }


    .tool-preview {

        left:
            30px;

        right:
            30px;

    }


    .why-layout {

        gap:
            70px;

    }


    .footer-links-group {

        gap:
            50px;

    }

}


/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (
    max-width: 900px
) {

    .nav-links,
    .nav-actions {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            flex;

    }


    .mobile-menu {

        position:
            absolute;

        top:
            82px;

        left:
            16px;

        right:
            16px;

        display:
            flex;

        flex-direction:
            column;

        gap:
            6px;

        padding:
            15px;

        border:
            1px solid
            #252525;

        border-radius:
            16px;

        background:
            rgba(
                10,
                10,
                10,
                .97
            );

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

        backdrop-filter:
            blur(20px);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-10px);

        transition:
            opacity var(--transition),
            visibility var(--transition),
            transform var(--transition);

    }


    .mobile-menu.open {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

    }


    .mobile-menu > a {

        min-height:
            50px;

        display:
            flex;

        align-items:
            center;

        padding:
            0 15px;

        border-radius:
            10px;

        color:
            #aaa;

        font-size:
            16px;

        font-weight:
            600;

    }


    .mobile-menu > a:hover {

        background:
            #151515;

        color:
            white;

    }


    .mobile-menu > .btn {

        justify-content:
            center;

        color:
            white;

    }


    .mobile-menu-divider {

        height:
            1px;

        margin:
            5px 0;

        background:
            #222;

    }


    .hero {

        padding-top:
            135px;

    }


    .hero-content {

        width:
            100%;

    }


    .hero-product {

        margin-top:
            75px;

    }


    .mock-dashboard {

        grid-template-columns:
            125px 1fr;

    }


    .mock-sidebar {

        padding:
            14px 8px;

    }


    .mock-main {

        padding:
            20px;

    }


    .mock-sidebar-logo img {

        width:
            70px;

    }


    .mock-nav-item {

        font-size:
            9px;

    }


    .features-grid,
    .tools-grid {

        grid-template-columns:
            1fr;

    }


    .feature-card-large {

        min-height:
            600px;

    }


    .why-layout {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .why-heading {

        position:
            static;

    }


    .steps {

        grid-template-columns:
            1fr;

    }


    .step {

        min-height:
            auto;

        padding:
            35px 0;

    }


    .step:not(:last-child) {

        margin-right:
            0;

        border-right:
            0;

        border-bottom:
            1px solid
            #202020;

    }


    .step h3 {

        margin-top:
            28px;

    }


    .footer-top {

        flex-direction:
            column;

    }

}


/* =========================================================
   RESPONSIVE — 650px
========================================================= */

@media (
    max-width: 650px
) {

    .hero {

        padding:
            120px 0 90px;

    }


    .hero-title {

        font-size:
            clamp(
                52px,
                15vw,
                76px
            );

        line-height:
            .92;

    }


    .hero-description {

        margin-top:
            25px;

        font-size:
            17px;

    }


    .hero-actions {

        flex-direction:
            column;

        width:
            100%;

    }


    .hero-actions .btn {

        width:
            100%;

    }


    .hero-trust {

        flex-direction:
            column;

        gap:
            10px;

        font-size:
            12px;

    }


    .hero-product {

        margin-top:
            60px;

    }


    .dashboard-window {

        border-radius:
            14px;

    }


    .window-top {

        height:
            36px;

    }


    .window-address {

        display:
            none;

    }


    .window-top {

        grid-template-columns:
            1fr 1fr;

    }


    .mock-dashboard {

        grid-template-columns:
            1fr;

    }


    .mock-sidebar {

        display:
            none;

    }


    .mock-main {

        padding:
            15px;

    }


    .mock-main-top h3 {

        font-size:
            16px;

    }


    .mock-stat-grid {

        gap:
            6px;

    }


    .mock-stat-card {

        min-height:
            75px;

        padding:
            10px;

    }


    .mock-stat-card strong {

        font-size:
            17px;

    }


    .mock-chart-card {

        padding:
            12px;

    }


    .mock-chart {

        height:
            110px;

    }


    .mock-ai-card {

        padding:
            10px;

    }


    .floating-insight {

        right:
            5px;

        bottom:
            25px;

        min-width:
            190px;

        padding:
            10px;

    }


    .floating-icon {

        width:
            27px;

        height:
            27px;

    }


    .statement-section {

        padding:
            100px 0;

    }


    .feature-card,
    .tool-card {

        min-height:
            530px;

        padding:
            25px;

        border-radius:
            20px;

    }


    .feature-number {

        margin-bottom:
            55px;

    }


    .feature-content h3 {

        font-size:
            31px;

    }


    .feature-content p {

        font-size:
            16px;

    }


    .analytics-visual {

        left:
            25px;

        right:
            25px;

        height:
            220px;

    }


    .ai-orb {

        width:
            100px;

        height:
            100px;

    }


    .ring-a {

        width:
            180px;

        height:
            180px;

    }


    .ring-b {

        width:
            260px;

        height:
            140px;

    }


    .ring-c {

        width:
            320px;

        height:
            320px;

    }


    .title-stack {

        width:
            90%;

    }


    .tool-content {

        margin-top:
            70px;

    }


    .tool-content h3 {

        font-size:
            32px;

    }


    .tool-preview {

        left:
            25px;

        right:
            25px;

    }


    .tools-bottom {

        flex-wrap:
            wrap;

        font-size:
            12px;

    }


    .cta-actions {

        flex-direction:
            column;

    }


    .cta-actions .btn {

        width:
            100%;

    }


    .final-cta {

        min-height:
            620px;

    }


    .footer-links-group {

        display:
            grid;

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

        gap:
            35px;

    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            8px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* =========================================================
   JS ENHANCEMENTS
========================================================= */

.site-header {

    transition:
        background 300ms ease,
        backdrop-filter 300ms ease;

}


.site-header.header-scrolled {

    position:
        fixed;

    background:
        rgba(
            5,
            5,
            5,
            .78
        );

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 40px
        rgba(
            0,
            0,
            0,
            .25
        );

}


.nav-link.active {

    color:
        var(--white);

}


.nav-link.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -8px;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--red);

}


.btn {

    position:
        relative;

    overflow:
        hidden;

}


.button-ripple {

    position:
        absolute;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

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

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

    pointer-events:
        none;

    animation:
        button-ripple-animation
        600ms
        ease-out
        forwards;

}


@keyframes button-ripple-animation {

    from {

        width:
            10px;

        height:
            10px;

        opacity:
            .6;

    }

    to {

        width:
            450px;

        height:
            450px;

        opacity:
            0;

    }

}


body.mobile-menu-open {

    overflow:
        hidden;

}


.page-hidden .hero-product {

    animation-play-state:
        paused;

}