:root {
    --fink-bg: #050914;
    --fink-bg-soft: #0a1120;
    --fink-card: #0d1627;
    --fink-text: #f8fbff;
    --fink-muted: #9aa9bd;
    --fink-border: rgba(140, 170, 220, .18);
    --fink-blue: #16b9ff;
    --fink-blue-2: #3478ff;
    --fink-violet: #7c3cff;
    --fink-cyan: #11e1e7;
    --fink-light: #f6f9ff;
    --fink-radius-sm: 12px;
    --fink-radius: 20px;
    --fink-radius-lg: 32px;
    --fink-shadow: 0 24px 70px rgba(0, 0, 0, .22);
    --fink-max: 1240px;
    --fink-header-height: 88px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--fink-bg);
    color: var(--fink-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.fink-container {
    width: min(calc(100% - 40px), var(--fink-max));
    margin-inline: auto;
}

.fink-section {
    padding: 96px 0;
}

.site-main {
    min-height: 60vh;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Temporary foundation screen */
.hero-placeholder {
    min-height: calc(100vh - var(--fink-header-height));
    display: grid;
    place-items: center;
    padding: 100px 0;
    background:
        radial-gradient(circle at 18% 30%, rgba(22, 185, 255, .16), transparent 32%),
        radial-gradient(circle at 82% 60%, rgba(124, 60, 255, .14), transparent 34%),
        #050914;
}

.hero-placeholder__eyebrow {
    color: var(--fink-cyan);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-placeholder h1 {
    max-width: 780px;
    margin: 14px 0 10px;
    font-size: clamp(2.6rem, 6vw, 5.8rem);
    line-height: .98;
}

.hero-placeholder p {
    color: var(--fink-muted);
    font-size: 1.1rem;
}
/* =========================================================
   HOME HERO
   ========================================================= */

.home-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: flex-start;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(20, 180, 255, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 55%,
            rgba(115, 55, 255, 0.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #050914 0%,
            #07101d 45%,
            #070b18 100%
        );

    padding: 38px 0 65px;
}


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

.home-hero__grid {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(520px, 0.95fr);

    align-items: center;

    gap: 70px;
}


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

.home-hero__content {

    position: relative;

    max-width: 720px;
}


.home-hero__eyebrow {

    display: inline-flex;
    align-items: center;

    margin-bottom: 22px;

    padding:
        8px 14px;

    border:
        1px solid
        rgba(22, 199, 255, 0.20);

    border-radius: 100px;

    background:
        rgba(22, 199, 255, 0.06);

    color:
        #58d8ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    box-shadow:
        inset 0 0 22px
        rgba(22, 199, 255, 0.03);
}


.home-hero__title {

    margin:
        0 0 24px;

    color:
        #ffffff;

    font-size:
        clamp(3.1rem, 4.7vw, 5.25rem);

    font-weight:
        800;

    line-height:
        0.96;

    letter-spacing:
        -0.05em;
}


.home-hero__title span {

    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #45ccff 35%,
            #5f7cff 66%,
            #9965ff 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.home-hero__text {

    max-width:
        650px;

    margin:
        0;

    color:
        #a8b5c9;

    font-size:
        18px;

    line-height:
        1.8;
}


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

.home-hero__actions {

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 32px;
}


.home-hero__secondary-btn {

    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding:
        0 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.03);

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.home-hero__secondary-btn:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(22, 199, 255, 0.45);

    background:
        rgba(22, 199, 255, 0.06);
}


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

.home-hero__features {

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap:
        14px 24px;

    margin-top:
        32px;
}


.home-hero__feature {

    display: flex;
    align-items: center;

    gap: 9px;

    color:
        #aeb9ca;

    font-size:
        13px;

    font-weight:
        600;
}


.home-hero__feature-dot {

    width: 8px;
    height: 8px;

    border-radius:
        100%;

    background:
        linear-gradient(
            135deg,
            #16c7ff,
            #7755ff
        );

    box-shadow:
        0 0 12px
        rgba(22, 199, 255, 0.6);
}


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

.home-hero__visual {

    position: relative;

    min-height:
        520px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==============================
   LAPTOP
   ============================== */

.hero-device--laptop {

    position: relative;
    z-index: 5;

    width:
        min(100%, 610px);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        22px;

    overflow:
        hidden;

    background:
        #091121;

    box-shadow:

        0 45px 90px
        rgba(0, 0, 0, 0.45),

        0 0 70px
        rgba(54, 117, 255, 0.10),

        inset 0 0 0 1px
        rgba(255, 255, 255, 0.03);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);
}


/* Browser top bar */

.hero-device__topbar {

    height:
        38px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding:
        0 14px;

    background:
        rgba(255, 255, 255, 0.04);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}


.hero-device__dots {

    display: flex;

    gap: 5px;
}


.hero-device__dots span {

    width: 7px;
    height: 7px;

    border-radius:
        100%;

    background:
        rgba(255, 255, 255, 0.16);
}


.hero-device__address {

    width:
        45%;

    height:
        9px;

    border-radius:
        100px;

    background:
        rgba(255, 255, 255, 0.06);
}


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

.hero-dashboard {

    min-height:
        390px;

    display: grid;

    grid-template-columns:
        72px 1fr;
}


.hero-dashboard__sidebar {

    padding:
        22px 16px;

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    gap: 18px;

    background:
        rgba(4, 8, 18, 0.70);

    border-right:
        1px solid
        rgba(255, 255, 255, 0.05);
}


.hero-dashboard__logo {

    width: 34px;
    height: 34px;

    margin-bottom:
        14px;

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            #1fc5ff,
            #5d67ff,
            #8d4cff
        );

    box-shadow:
        0 0 24px
        rgba(39, 112, 255, 0.30);
}


.hero-dashboard__sidebar span {

    width:
        28px;

    height:
        7px;

    border-radius:
        100px;

    background:
        rgba(255, 255, 255, 0.08);
}


.hero-dashboard__content {

    padding:
        28px;
}


.hero-dashboard__heading {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.hero-dashboard__heading small {

    color:
        #66768f;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;
}


.hero-dashboard__heading h3 {

    margin:
        2px 0 0;

    color:
        #ffffff;

    font-size:
        19px;
}


.hero-dashboard__avatar {

    width:
        36px;

    height:
        36px;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #15c6ff,
            #704cff
        );
}


.hero-dashboard__stats {

    display: grid;

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

    gap:
        12px;

    margin-top:
        26px;
}


.hero-stat-card {

    padding:
        16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.025);
}


.hero-stat-card span {

    display:
        block;

    color:
        #71819a;

    font-size:
        10px;
}


.hero-stat-card strong {

    display:
        block;

    margin-top:
        5px;

    color:
        #ffffff;

    font-size:
        19px;
}


.hero-dashboard__chart {

    position:
        relative;

    height:
        190px;

    margin-top:
        20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.05);

    border-radius:
        16px;

    overflow:
        hidden;

    background:

        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),

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

    background-size:
        28px 28px;
}


.hero-dashboard__chart-line {

    position:
        absolute;

    inset:
        30px 30px auto 30px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #16c7ff,
            #3675ff,
            #7c3cff
        );

    transform:
        rotate(-7deg);

    box-shadow:
        0 0 20px
        rgba(22, 199, 255, 0.4);
}


.hero-dashboard__chart-bars {

    position:
        absolute;

    left:
        30px;

    right:
        30px;

    bottom:
        22px;

    height:
        115px;

    display:
        flex;

    align-items:
        end;

    gap:
        14px;
}


.hero-dashboard__chart-bars span {

    flex:
        1;

    border-radius:
        8px 8px 3px 3px;

    background:
        linear-gradient(
            180deg,
            rgba(40, 192, 255, 0.8),
            rgba(78, 84, 255, 0.3)
        );
}


/* =========================================================
   PHONE
   ========================================================= */

.hero-phone {

    position:
        absolute;

    z-index:
        8;

    right:
        -5px;

    bottom:
        25px;

    width:
        170px;

    height:
        340px;

    padding:
        8px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius:
        30px;

    background:
        #060b16;

    box-shadow:
        0 30px 65px
        rgba(0, 0, 0, 0.48),

        0 0 40px
        rgba(111, 58, 255, 0.15);

    transform:
        rotate(4deg);
}


.hero-phone__notch {

    position:
        absolute;

    z-index:
        5;

    top:
        13px;

    left:
        50%;

    width:
        58px;

    height:
        16px;

    border-radius:
        100px;

    background:
        #050914;

    transform:
        translateX(-50%);
}


.hero-phone__screen {

    height:
        100%;

    padding:
        24px 14px 14px;

    overflow:
        hidden;

    border-radius:
        23px;

    background:
        linear-gradient(
            150deg,
            #0a1322 0%,
            #102747 58%,
            #30216b 100%
        );
}


.hero-phone__header {

    width:
        70%;

    height:
        7px;

    margin-top:
        8px;

    border-radius:
        100px;

    background:
        rgba(255, 255, 255, 0.15);
}


.hero-phone__product {

    height:
        125px;

    margin-top:
        26px;

    border-radius:
        18px;

    background:

        radial-gradient(
            circle at 35% 30%,
            #39cfff,
            transparent 35%
        ),

        radial-gradient(
            circle at 70% 65%,
            #8f53ff,
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #0f1a30,
            #172a50
        );
}


.hero-phone__label {

    display:
        block;

    margin-top:
        16px;

    color:
        #59d8ff;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.10em;
}


.hero-phone strong {

    display:
        block;

    margin-top:
        4px;

    color:
        #ffffff;

    font-size:
        13px;

    line-height:
        1.35;
}


.hero-phone__button {

    width:
        70%;

    height:
        26px;

    margin-top:
        14px;

    border-radius:
        8px;

    background:
        linear-gradient(
            90deg,
            #16c7ff,
            #6855ff
        );
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.hero-floating-card {

    position:
        absolute;

    z-index:
        12;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        12px;

    background:
        rgba(8, 14, 28, 0.80);

    color:
        #dce8f7;

    font-size:
        11px;

    font-weight:
        700;

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.25);

    backdrop-filter:
        blur(12px);
}


.hero-floating-card span {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        8px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #16c7ff,
            #6c4fff
        );
}


.hero-floating-card--wp {

    left:
        -28px;

    top:
        115px;
}


.hero-floating-card--shop {

    right:
        60px;

    top:
        30px;
}


.hero-floating-card--code {

    left:
        30px;

    bottom:
        48px;
}


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

.hero-tech-orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(79, 119, 255, 0.12);

    border-radius:
        50%;

    pointer-events:
        none;
}


.hero-tech-orbit--one {

    width:
        540px;

    height:
        540px;

    border-style:
        dashed;

    animation:
        heroOrbitRotate 32s linear infinite;
}


.hero-tech-orbit--two {

    width:
        390px;

    height:
        390px;

    border-color:
        rgba(22, 199, 255, 0.09);

    animation:
        heroOrbitRotate 24s linear infinite reverse;
}


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

.home-hero__glow {
    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    filter: blur(85px);

    opacity: 0.36;

    pointer-events: none;

    mix-blend-mode: screen;
}

.home-hero__glow--one {
    left: -220px;
    top: -100px;

    background:
        radial-gradient(
            circle,
            rgba(0, 195, 255, 0.85) 0%,
            rgba(0, 140, 255, 0.40) 35%,
            transparent 70%
        );

    animation:
        heroGlowOne 9s ease-in-out infinite alternate;
}

.home-hero__glow--two {
    right: -200px;
    bottom: -180px;

    background:
        radial-gradient(
            circle,
            rgba(125, 65, 255, 0.9) 0%,
            rgba(74, 64, 255, 0.42) 38%,
            transparent 72%
        );

    animation:
        heroGlowTwo 11s ease-in-out infinite alternate;
}


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

@media (max-width: 1150px) {

    .home-hero__grid {

        grid-template-columns:
            1fr 480px;

        gap:
            40px;
    }


    .home-hero__title {

        font-size:
            clamp(
                3.2rem,
                5.5vw,
                5.7rem
            );
    }


    .home-hero__visual {

        transform:
            scale(0.90);
    }

}


@media (max-width: 900px) {

    .home-hero {

        padding:
            90px 0;
    }


    .home-hero__grid {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .home-hero__content {

        max-width:
            760px;
    }


    .home-hero__visual {

        width:
            100%;

        max-width:
            680px;

        margin:
            0 auto;

        transform:
            none;
    }

}


@media (max-width: 620px) {

    .home-hero {

        padding:
            70px 0 60px;
    }


    .home-hero__title {

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


    .home-hero__text {

        font-size:
            16px;
    }


    .home-hero__actions {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .home-hero__actions .fink-btn,
    .home-hero__secondary-btn {

        width:
            100%;
    }


    .home-hero__visual {

        min-height:
            420px;

        transform:
            scale(0.78);

        transform-origin:
            top center;

        margin-bottom:
            -90px;
    }


    .hero-phone {

        right:
            -30px;
    }


    .hero-floating-card--wp {

        left:
            -15px;
    }


    .hero-floating-card--shop {

        right:
            -10px;
    }

}

/* =========================================================
   TECHNOLOGY TRUST STRIP
   ========================================================= */

.tech-trust {
    position: relative;
    z-index: 10;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #070d19 0%,
            #091323 45%,
            #080c18 100%
        );

    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* Gradient top accent */

.tech-trust__line {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(22, 199, 255, 0.55),
            rgba(104, 83, 255, 0.45),
            transparent
        );
}


/* Main layout */

.tech-trust__inner {
    min-height: 118px;

    display: grid;

    grid-template-columns:
        245px
        minmax(0, 1fr);

    align-items: center;

    gap: 34px;
}


/* Intro */

.tech-trust__intro {
    position: relative;

    padding-right: 30px;

    border-right:
        1px solid rgba(255, 255, 255, 0.08);
}

.tech-trust__intro span {
    display: block;

    color: #718198;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.tech-trust__intro strong {
    display: block;

    margin-top: 4px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
}


/* =========================================================
   MARQUEE
   ========================================================= */

.tech-trust__marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 7%,
            #000 93%,
            transparent
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 7%,
            #000 93%,
            transparent
        );
}


.tech-trust__track {
    display: flex;
    align-items: center;

    width: max-content;

    gap: 16px;

    animation:
        techTrustScroll
        28s
        linear
        infinite;
}


.tech-trust__marquee:hover .tech-trust__track {
    animation-play-state: paused;
}


/* Individual technology */

.tech-trust__item {
    flex: 0 0 auto;

    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 15px 8px 9px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.025);

    color: #c7d1df;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


.tech-trust__item:hover {
    transform: translateY(-2px);

    border-color:
        rgba(37, 187, 255, 0.25);

    background:
        rgba(22, 199, 255, 0.045);
}


/* Technology mini-icon */

.tech-trust__icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 193, 255, 0.16),
            rgba(106, 77, 255, 0.20)
        );

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

    color: #71d9ff;

    font-size: 9px;
    font-weight: 800;

    box-shadow:
        inset 0 0 15px rgba(29, 161, 255, 0.05);
}


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

@media (max-width: 900px) {

    .tech-trust__inner {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 20px;

        padding-top: 24px;
        padding-bottom: 24px;
    }

    .tech-trust__intro {
        padding-right: 0;
        padding-bottom: 18px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.07);
    }
}


@media (max-width: 640px) {

    .tech-trust__inner {
        gap: 16px;
    }

    .tech-trust__item {
        min-height: 48px;

        padding:
            7px 13px 7px 8px;
    }

    .tech-trust__icon {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }
}

/* =========================================================
   HOME SERVICES - DARK PREMIUM VERSION
   ========================================================= */

.home-services {
    position: relative;
    overflow: hidden;

    padding: 105px 0 95px;

    color: #f8fbff;

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(22, 199, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 76%,
            rgba(124, 60, 255, 0.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #07101d 0%,
            #0a1322 46%,
            #080d19 100%
        );
}


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

.home-services::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.28;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(95, 145, 210, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(95, 145, 210, 0.035) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 88%
        );
}


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

.home-services__header {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.65fr);

    gap: 90px;

    align-items: end;

    padding-bottom: 42px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}


.home-services__eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    color: #49d8ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-services__heading h2 {
    max-width: 820px;

    margin: 0;

    color: #ffffff;

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

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -0.045em;
}


.home-services__heading h2 span {
    display: block;

    background:
        linear-gradient(
            100deg,
            #4bd8ff,
            #5c7dff 50%,
            #9c68ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.home-services__header-side {
    padding-bottom: 5px;
}


.home-services__number {
    display: block;

    margin-bottom: 14px;

    color: #66758a;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;
}


.home-services__header-side p {
    margin: 0;

    color: #9caabd;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   PROCESS LINE
   ========================================================= */

.home-services__process {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 24px 0 32px;

    color: #7d8da4;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.04em;
}


.home-services__process span {
    white-space: nowrap;
}


.home-services__process i {
    color: #46556b;

    font-style: normal;
}


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

.services-showcase {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.45fr
        0.78fr
        0.78fr;

    gap: 18px;
}


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

.service-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    padding: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.22);

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

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.service-card::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(46, 147, 255, 0.20),
            transparent 68%
        );

    opacity: 0;

    transition: opacity 0.35s ease;
}


.service-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #22c7ff,
            #7358ff,
            transparent
        );

    transition: opacity 0.35s ease;
}


.service-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(52, 153, 255, 0.30);

    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.30),
        0 0 40px rgba(49, 103, 255, 0.08);
}


.service-card:hover::before,
.service-card:hover::after {
    opacity: 1;
}


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

.service-card__top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 42px;
}


.service-card__number {
    color: #64748b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.14em;
}


.service-card__icon {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 178, 255, 0.13),
            rgba(107, 77, 255, 0.16)
        );

    border:
        1px solid rgba(88, 137, 255, 0.18);

    color: #58d8ff;

    font-size: 12px;
    font-weight: 800;

    box-shadow:
        inset 0 0 18px rgba(42, 160, 255, 0.05);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.service-card:hover .service-card__icon {
    transform:
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 0 22px rgba(48, 144, 255, 0.12);
}


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

.service-card__content {
    position: relative;
    z-index: 3;
}


.service-card__label {
    display: block;

    margin-bottom: 7px;

    color: #4bd8ff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.service-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 13px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -0.025em;
}


.service-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #96a5b8;

    font-size: 13px;

    line-height: 1.7;
}


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

.service-card__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 20px;
}


.service-card__tags span {
    padding: 6px 9px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.035);

    color: #aab6c7;

    font-size: 9px;
    font-weight: 700;
}


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

.service-card__link {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 22px;

    color: #54d8ff;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}


.service-card__link span {
    transition: transform 0.25s ease;
}


.service-card:hover .service-card__link span {
    transform: translateX(5px);
}


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

.service-card--featured {
    grid-row: span 2;

    min-height: 620px;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 27, 47, 0.95),
            rgba(9, 18, 34, 0.92)
        );
}


.service-card--featured .service-card__top {
    margin-bottom: 30px;
}


.service-card--featured h3 {
    font-size:
        clamp(2rem, 2.6vw, 3.1rem);
}


.service-card--featured p {
    max-width: 510px;

    font-size: 14px;
}


/* =========================================================
   BROWSER MOCKUP
   ========================================================= */

.service-browser {
    position: absolute;

    left: 34px;
    right: 34px;

    bottom: -25px;

    height: 275px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        18px 18px 0 0;

    background: #091321;

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


.service-card--featured:hover .service-browser {
    transform: translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.38),
        0 0 35px rgba(44, 126, 255, 0.08);
}


.service-browser__bar {
    height: 34px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 0 12px;

    background: #0d1828;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);
}


.service-browser__bar > div {
    display: flex;

    gap: 4px;
}


.service-browser__bar i {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.18);
}


.service-browser__bar > span {
    width: 42%;
    height: 7px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.07);
}


.service-browser__body {
    position: relative;

    height: calc(100% - 34px);

    padding: 20px;
}


.service-browser__nav {
    width: 100%;
    height: 16px;

    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 0 18%,
            transparent 18% 60%,
            rgba(255, 255, 255, 0.06) 60%
        );
}


.service-browser__hero {
    width: 100%;
    height: 120px;

    margin-top: 18px;

    padding: 22px;

    border-radius: 14px;

    background:
        linear-gradient(
            130deg,
            #071326,
            #113759 55%,
            #44308d
        );
}


.service-browser__hero > span {
    display: block;

    width: 65px;
    height: 6px;

    margin-bottom: 11px;

    border-radius: 10px;

    background: #38c8ff;

    box-shadow:
        0 0 16px rgba(56, 200, 255, 0.28);
}


.service-browser__hero strong {
    display: block;

    width: 58%;
    height: 8px;

    margin-top: 7px;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.78);
}


.service-browser__hero strong:nth-child(3) {
    width: 42%;
}


.service-browser__hero i {
    display: block;

    width: 70px;
    height: 20px;

    margin-top: 15px;

    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            #19c8ff,
            #6759ff
        );
}


.service-browser__cards {
    display: grid;

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

    gap: 10px;

    margin-top: 12px;
}


.service-browser__cards span {
    height: 55px;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.035)
        );

    border:
        1px solid rgba(255, 255, 255, 0.04);
}


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

.service-card--commerce,
.service-card--mobile {
    min-height: 370px;
}


.commerce-visual {
    position: relative;

    height: 120px;

    margin-top: 20px;
}


.commerce-product {
    width: 130px;

    padding: 10px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 14px;

    background:
        #0c1727;

    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.22);

    transform: rotate(-3deg);

    transition:
        transform 0.35s ease;
}


.service-card--commerce:hover .commerce-product {
    transform:
        rotate(0deg)
        translateY(-4px);
}


.commerce-product__image {
    height: 52px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #218bb9,
            #5664cc 55%,
            #7f59c5
        );
}


.commerce-product > span,
.commerce-product > strong {
    display: block;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.10);
}


.commerce-product > span {
    width: 70%;
    height: 5px;

    margin-top: 8px;
}


.commerce-product > strong {
    width: 40%;
    height: 6px;

    margin-top: 6px;
}


.commerce-product button {
    position: absolute;

    right: 8px;
    bottom: 8px;

    width: 22px;
    height: 22px;

    border: 0;
    border-radius: 6px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #19c8ff,
            #6657ff
        );
}


.commerce-stat {
    position: absolute;

    right: 0;
    top: 22px;

    padding: 10px 12px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 11px;

    background:
        #0c1727;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.25);
}


.commerce-stat small {
    display: block;

    color: #758399;

    font-size: 8px;
}


.commerce-stat strong {
    color: #52d5ff;

    font-size: 15px;
}


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

.service-phone {
    position: absolute;

    width: 92px;
    height: 180px;

    right: 25px;
    bottom: -30px;

    padding: 5px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 18px;

    background: #050b14;

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

    transform: rotate(5deg);

    transition:
        transform 0.4s ease;
}


.service-card--mobile:hover .service-phone {
    transform:
        rotate(1deg)
        translateY(-7px);
}


.service-phone__notch {
    position: absolute;

    z-index: 2;

    width: 30px;
    height: 7px;

    left: 50%;
    top: 8px;

    border-radius: 20px;

    background: #050b14;

    transform: translateX(-50%);
}


.service-phone__screen {
    height: 100%;

    padding: 24px 10px 10px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #0f1c2e,
            #171b3c
        );
}


.service-phone__circle {
    width: 48px;
    height: 48px;

    margin: 6px auto 14px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #67ddff,
            #6473ff,
            #9b66ff
        );

    box-shadow:
        0 0 20px rgba(83, 117, 255, 0.20);
}


.service-phone__screen > span,
.service-phone__screen > strong {
    display: block;

    margin-top: 7px;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.10);
}


.service-phone__screen > span {
    width: 65%;
    height: 5px;
}


.service-phone__screen > strong {
    width: 85%;
    height: 7px;
}


.service-phone__button {
    width: 60%;
    height: 18px;

    margin-top: 13px;

    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            #17bfff,
            #6d57ff
        );
}


/* =========================================================
   SMALL CARDS
   ========================================================= */

.service-card--small {
    min-height: 230px;
}


.service-card--small .service-card__top {
    margin-bottom: 28px;
}


.service-card--small h3 {
    font-size: 21px;
}


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

.home-services__bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 22px;

    padding: 26px 30px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);

    box-shadow:
        inset 0 0 30px rgba(42, 108, 255, 0.02);
}


.home-services__bottom span {
    display: block;

    color: #718198;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.home-services__bottom strong {
    display: block;

    margin-top: 4px;

    color: #ffffff;

    font-size: 18px;
}


.home-services__all {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #55d9ff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}


.home-services__all span {
    color: inherit;

    font-size: 16px;

    transition:
        transform 0.25s ease;
}


.home-services__all:hover span {
    transform: translateX(5px);
}


/* =========================================================
   MOVING LIGHT GLOWS
   ========================================================= */

.home-services__glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(105px);

    opacity: 0.22;

    pointer-events: none;
}


.home-services__glow--one {
    left: -260px;
    top: 18%;

    background:
        radial-gradient(
            circle,
            rgba(29, 191, 255, 0.95),
            transparent 68%
        );

    animation:
        homeServicesGlowOne
        13s
        ease-in-out
        infinite alternate;
}


.home-services__glow--two {
    right: -270px;
    bottom: 6%;

    background:
        radial-gradient(
            circle,
            rgba(111, 74, 255, 0.95),
            transparent 68%
        );

    animation:
        homeServicesGlowTwo
        16s
        ease-in-out
        infinite alternate;
}


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

@media (max-width: 1100px) {

    .services-showcase {
        grid-template-columns:
            1.2fr 1fr;
    }

    .service-card--featured {
        grid-row: span 2;
    }
}


@media (max-width: 850px) {

    .home-services {
        padding:
            80px 0;
    }

    .home-services__header {
        grid-template-columns:
            1fr;

        gap: 25px;
    }

    .services-showcase {
        grid-template-columns:
            1fr 1fr;
    }

    .service-card--featured {
        grid-column:
            1 / -1;

        grid-row:
            auto;

        min-height:
            600px;
    }
}


@media (max-width: 620px) {

    .home-services {
        padding:
            65px 0;
    }

    .home-services__heading h2 {
        font-size:
            clamp(2.5rem, 11vw, 3.6rem);
    }

    .home-services__process {
        overflow-x: auto;

        padding-bottom: 22px;
    }

    .services-showcase {
        grid-template-columns:
            1fr;
    }

    .service-card,
    .service-card--commerce,
    .service-card--mobile,
    .service-card--small {
        min-height:
            auto;

        padding:
            25px;
    }

    .service-card--featured {
        min-height:
            570px;
    }

    .service-browser {
        left: 25px;
        right: 25px;
    }

    .service-phone {
        position: relative;

        right: auto;
        bottom: auto;

        margin:
            25px auto -25px;
    }

    .home-services__bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}

/* =========================================================
   HOME SELECTED WORK
   ========================================================= */

.home-work {
    position: relative;
    overflow: hidden;

    padding: 105px 0 100px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(44, 134, 255, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 85%,
            rgba(123, 75, 255, 0.14),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #0b1728 0%,
            #0e1d32 48%,
            #10172b 100%
        );

    border-top:
        1px solid rgba(255,255,255,0.06);
}


/* slightly brighter than services */

.home-work::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .32;

    background-image:
        linear-gradient(
            rgba(103, 153, 215, .04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(103, 153, 215, .04) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


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

.home-work__header {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, .65fr);

    gap: 80px;

    align-items: end;

    padding-bottom: 38px;

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


.home-work__eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #54d8ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.home-work__header h2 {
    max-width: 800px;

    margin: 0;

    color: #fff;

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

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -.045em;
}


.home-work__header h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #4ddcff,
            #6881ff 55%,
            #a06aff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.home-work__number {
    display: block;

    margin-bottom: 14px;

    color: #718198;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
}


.home-work__intro p {
    margin: 0;

    color: #9caabd;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   FILTERS
   ========================================================= */

.home-work__filters {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    padding: 25px 0 30px;
}


.work-filter {
    padding: 9px 15px;

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

    border-radius: 100px;

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

    color: #91a1b6;

    font: inherit;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

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


.work-filter:hover,
.work-filter.is-active {
    color: #fff;

    border-color:
        rgba(73,199,255,.30);

    background:
        linear-gradient(
            90deg,
            rgba(25,190,255,.12),
            rgba(103,82,255,.12)
        );
}


.work-filter:hover {
    transform: translateY(-2px);
}


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

.home-work__grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 20px;
}


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

.work-card {
    position: relative;

    overflow: hidden;

    padding: 14px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

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

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


.work-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(66,170,255,.27);

    box-shadow:
        0 35px 80px rgba(0,0,0,.28),
        0 0 45px rgba(59,110,255,.07);
}


.work-card--featured {
    grid-column: 1 / -1;
}


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

.work-card__visual {
    position: relative;

    height: 330px;

    overflow: hidden;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #081424,
            #102744 55%,
            #27205c
        );
}


.work-card--featured .work-card__visual {
    height: 470px;
}


.work-card__visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,.035),
            transparent 65%
        );

    transform: translateX(-100%);

    transition: transform .8s ease;
}


.work-card:hover .work-card__visual::after {
    transform: translateX(100%);
}


/* =========================================================
   FEATURED STORE
   ========================================================= */

.work-browser {
    position: absolute;

    width: 78%;

    left: 11%;
    top: 52px;

    overflow: hidden;

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

    border-radius: 18px;

    background: #f6f8fc;

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

    transform:
        perspective(1200px)
        rotateX(3deg);

    transition:
        transform .5s ease;
}


.work-card:hover .work-browser {
    transform:
        perspective(1200px)
        rotateX(0)
        translateY(-8px)
        scale(1.015);
}


.work-browser__bar {
    height: 35px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 0 13px;

    background: #e9edf3;
}


.work-browser__bar > div {
    display: flex;

    gap: 4px;
}


.work-browser__bar i {
    width: 6px;
    height: 6px;

    display: block;

    border-radius: 50%;

    background: #aeb8c5;
}


.work-browser__bar > span {
    width: 42%;
    height: 7px;

    border-radius: 20px;

    background: #d2d9e3;
}


.work-store {
    min-height: 330px;

    padding: 20px 24px;

    background: #fff;
}


.work-store__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #111827;
}


.work-store__nav > div {
    display: flex;

    gap: 13px;
}


.work-store__nav span {
    width: 28px;
    height: 5px;

    border-radius: 10px;

    background: #dce2ea;
}


.work-store__hero {
    height: 175px;

    display: grid;

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

    margin-top: 18px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #101a2c,
            #17385c 50%,
            #48317d
        );
}


.work-store__copy {
    padding: 32px;
}


.work-store__copy small {
    color: #57d8ff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .1em;
}


.work-store__copy strong {
    display: block;

    width: 75%;
    height: 9px;

    margin-top: 10px;

    border-radius: 10px;

    background: rgba(255,255,255,.88);
}


.work-store__copy strong:nth-child(3) {
    width: 55%;
}


.work-store__copy > span {
    display: block;

    width: 75px;
    height: 23px;

    margin-top: 18px;

    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            #1bc8ff,
            #6c58ff
        );
}


.work-store__product {
    display: flex;
    align-items: center;
    justify-content: center;
}


.work-store__product div {
    width: 115px;
    height: 130px;

    border-radius: 60px 60px 18px 18px;

    background:
        linear-gradient(
            145deg,
            #69dfff,
            #6d78ff,
            #a366ff
        );

    box-shadow:
        0 20px 50px rgba(73,112,255,.25);
}


.work-store__products {
    display: grid;

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

    gap: 10px;

    margin-top: 13px;
}


.work-store__products div {
    height: 65px;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #edf1f7,
            #e3e8f1
        );
}


.work-card__floating-stat {
    position: absolute;

    right: 6%;
    bottom: 30px;

    padding: 13px 17px;

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

    border-radius: 13px;

    background:
        rgba(7,16,31,.82);

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

    backdrop-filter: blur(12px);
}


.work-card__floating-stat span {
    display: block;

    color: #7f8fa6;

    font-size: 8px;
}


.work-card__floating-stat strong {
    display: block;

    margin-top: 3px;

    color: #55d9ff;

    font-size: 20px;
}


/* =========================================================
   SMALL CORPORATE VISUAL
   ========================================================= */

.work-card__visual--corporate {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #0b1b30,
            #14355a
        );
}


.work-mini-site {
    width: 76%;

    padding: 18px;

    border-radius: 14px;

    background: #f8fafc;

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

    transform: rotate(-2deg);

    transition: transform .4s ease;
}


.work-card:hover .work-mini-site {
    transform:
        rotate(0)
        scale(1.03);
}


.work-mini-site__nav {
    height: 12px;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #ccd5e0 20%,
            transparent 20% 65%,
            #e0e6ee 65%
        );
}


.work-mini-site__content {
    height: 125px;

    margin-top: 14px;

    padding: 24px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #10213b,
            #315684
        );
}


.work-mini-site__content small,
.work-mini-site__content strong,
.work-mini-site__content span {
    display: block;

    border-radius: 10px;
}


.work-mini-site__content small {
    width: 50px;
    height: 5px;

    background: #4ed7ff;
}


.work-mini-site__content strong {
    width: 65%;
    height: 7px;

    margin-top: 8px;

    background: rgba(255,255,255,.8);
}


.work-mini-site__content strong:nth-child(3) {
    width: 45%;
}


.work-mini-site__content span {
    width: 60px;
    height: 18px;

    margin-top: 15px;

    background: #5b6dff;
}


.work-mini-site__blocks {
    display: grid;

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

    gap: 7px;

    margin-top: 9px;
}


.work-mini-site__blocks i {
    height: 42px;

    border-radius: 7px;

    background: #e7ecf3;
}


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

.work-card__visual--dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
}


.work-dashboard {
    width: 78%;
    height: 235px;

    display: grid;

    grid-template-columns: 55px 1fr;

    overflow: hidden;

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

    border-radius: 15px;

    background: #091525;

    box-shadow:
        0 30px 60px rgba(0,0,0,.30);
}


.work-dashboard aside {
    padding: 18px 12px;

    background: #07101c;

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


.work-dashboard aside strong {
    display: block;

    width: 28px;
    height: 28px;

    margin: 0 auto 22px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #20c8ff,
            #7058ff
        );
}


.work-dashboard aside span {
    display: block;

    width: 25px;
    height: 5px;

    margin: 13px auto;

    border-radius: 10px;

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


.work-dashboard__main {
    padding: 20px;
}


.work-dashboard__top {
    display: flex;
    justify-content: space-between;
}


.work-dashboard__top strong {
    width: 90px;
    height: 8px;

    border-radius: 10px;

    background: rgba(255,255,255,.14);
}


.work-dashboard__top span {
    width: 26px;
    height: 26px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2fc9ff,
            #6d58ff
        );
}


.work-dashboard__stats {
    display: grid;

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

    gap: 8px;

    margin-top: 20px;
}


.work-dashboard__stats i {
    height: 45px;

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

    border-radius: 8px;

    background: rgba(255,255,255,.025);
}


.work-dashboard__chart {
    height: 100px;

    display: flex;
    align-items: end;

    gap: 9px;

    margin-top: 12px;

    padding: 15px;

    border-radius: 9px;

    background: rgba(255,255,255,.025);
}


.work-dashboard__chart span {
    flex: 1;

    border-radius: 5px 5px 2px 2px;

    background:
        linear-gradient(
            #32caff,
            #565fff
        );
}


.work-dashboard__chart span:nth-child(1) { height: 35%; }
.work-dashboard__chart span:nth-child(2) { height: 55%; }
.work-dashboard__chart span:nth-child(3) { height: 43%; }
.work-dashboard__chart span:nth-child(4) { height: 78%; }
.work-dashboard__chart span:nth-child(5) { height: 65%; }


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

.work-card__visual--brand {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(99,85,255,.22),
            transparent 50%
        ),
        #0a1424;
}


.work-brand {
    text-align: center;
}


.work-brand > span {
    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 15px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #20c9ff,
            #5f6dff,
            #9b5cff
        );

    color: #fff;

    font-size: 38px;
    font-weight: 900;

    box-shadow:
        0 20px 50px rgba(83,91,255,.25);
}


.work-brand strong {
    display: block;

    color: #fff;

    font-size: 17px;

    letter-spacing: .18em;
}


.work-brand small {
    display: block;

    margin-top: 6px;

    color: #72839b;

    font-size: 8px;

    letter-spacing: .24em;
}


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

.work-card__visual--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
}


.work-mobile-circle {
    position: absolute;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(53,193,255,.24),
            rgba(96,70,255,.08),
            transparent 70%
        );
}


.work-mobile-device {
    position: relative;
    z-index: 2;

    width: 120px;
    height: 245px;

    padding: 6px;

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

    border-radius: 24px;

    background: #050b14;

    box-shadow:
        0 30px 60px rgba(0,0,0,.40);

    transform: rotate(4deg);

    transition: transform .4s ease;
}


.work-card:hover .work-mobile-device {
    transform:
        rotate(0)
        translateY(-7px);
}


.work-mobile-device__screen {
    height: 100%;

    padding: 20px 12px;

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #10243b,
            #27205c
        );
}


.work-mobile-device__screen > span {
    display: block;

    width: 45px;
    height: 5px;

    border-radius: 10px;

    background: rgba(255,255,255,.14);
}


.work-mobile-device__screen > div {
    height: 90px;

    margin-top: 20px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #43d5ff,
            #6968ff,
            #9a60ff
        );
}


.work-mobile-device__screen strong {
    display: block;

    height: 6px;

    margin-top: 11px;

    border-radius: 10px;

    background: rgba(255,255,255,.13);
}


.work-mobile-device__screen strong:nth-of-type(2) {
    width: 70%;
}


.work-mobile-device__screen i {
    display: block;

    width: 65%;
    height: 22px;

    margin-top: 18px;

    border-radius: 7px;

    background:
        linear-gradient(
            90deg,
            #23c6ff,
            #6959ff
        );
}


/* =========================================================
   PROJECT INFORMATION
   ========================================================= */

.work-card__info {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding: 25px 12px 12px;
}


.work-card__category {
    display: block;

    margin-bottom: 7px;

    color: #51d7ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.work-card h3 {
    margin: 0;

    color: #fff;

    font-size: 23px;
    font-weight: 800;

    letter-spacing: -.025em;
}


.work-card--featured h3 {
    font-size:
        clamp(2rem,3vw,3.3rem);
}


.work-card__info p {
    max-width: 680px;

    margin: 13px 0 0;

    color: #91a1b5;

    font-size: 13px;

    line-height: 1.7;
}


.work-card__index {
    color: #58687e;

    font-size: 11px;
    font-weight: 800;
}


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

.work-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 10px 12px 14px;
}


.work-card__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.work-card__tags span {
    padding: 5px 8px;

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

    border-radius: 6px;

    color: #8d9caf;

    font-size: 8px;
    font-weight: 700;
}


.work-card__footer a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #55d9ff;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


.work-card__footer a span {
    transition: transform .25s ease;
}


.work-card:hover .work-card__footer a span {
    transform: translateX(5px);
}


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

.home-work__bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 22px;

    padding: 25px 5px;
}


.home-work__bottom p {
    margin: 0;

    color: #78899f;

    font-size: 13px;
}


.home-work__bottom strong {
    color: #c8d4e4;
}


.home-work__cta {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}


.home-work__cta span {
    color: #55d9ff;

    transition: transform .25s ease;
}


.home-work__cta:hover span {
    transform: translateX(5px);
}


/* =========================================================
   GLOWS
   ========================================================= */

.home-work__glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .17;

    pointer-events: none;
}


.home-work__glow--one {
    right: -250px;
    top: 10%;

    background: #24bfff;
}


.home-work__glow--two {
    left: -280px;
    bottom: 5%;

    background: #7654ff;
}


/* =========================================================
   FILTER STATE
   ========================================================= */

.work-card.is-hidden {
    display: none;
}


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

@media (max-width: 850px) {

    .home-work {
        padding: 80px 0;
    }

    .home-work__header {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .work-card--featured .work-card__visual {
        height: 400px;
    }

    .work-browser {
        width: 88%;
        left: 6%;
    }
}


@media (max-width: 680px) {

    .home-work {
        padding: 65px 0;
    }

    .home-work__grid {
        grid-template-columns: 1fr;
    }

    .work-card--featured {
        grid-column: auto;
    }

    .work-card__visual,
    .work-card--featured .work-card__visual {
        height: 310px;
    }

    .work-browser {
        top: 35px;
    }

    .work-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-work__bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   HOME RESULTS / WHY FINKLINZ
   ========================================================= */

.home-results {
    position: relative;
    overflow: hidden;

    padding: 105px 0 100px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 174, 255, 0.09),
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(110, 69, 255, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #040812 0%,
            #070c16 48%,
            #050914 100%
        );

    border-top:
        1px solid rgba(255,255,255,0.05);
}


.home-results::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .28;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(90, 135, 190, .03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(90, 135, 190, .03) 1px,
            transparent 1px
        );

    background-size: 54px 54px;
}


/* Header */

.home-results__header {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(300px,.65fr);

    gap: 80px;

    align-items: end;

    padding-bottom: 38px;

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


.home-results__eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #52d8ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.home-results__header h2 {
    margin: 0;

    color: #fff;

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

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -.045em;
}


.home-results__header h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #4ed8ff,
            #5f78ff 55%,
            #9c65ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.home-results__number {
    display: block;

    margin-bottom: 14px;

    color: #627188;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
}


.home-results__intro p {
    margin: 0;

    color: #91a0b4;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   STATS
   ========================================================= */

.home-results__stats {
    position: relative;
    z-index: 2;

    display: grid;

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

    margin-top: 32px;

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

    border-radius: 20px;

    overflow: hidden;

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


.result-stat {
    position: relative;

    padding: 30px 28px;

    min-height: 190px;

    border-right:
        1px solid rgba(255,255,255,.06);
}


.result-stat:last-child {
    border-right: 0;
}


.result-stat__value,
.result-stat__suffix {
    display: inline-block;

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

    font-weight: 850;

    line-height: 1;

    letter-spacing: -.05em;

    background:
        linear-gradient(
            90deg,
            #4bd9ff,
            #6580ff,
            #9d68ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.result-stat strong {
    display: block;

    margin-top: 16px;

    color: #fff;

    font-size: 15px;
}


.result-stat p {
    margin: 9px 0 0;

    color: #718096;

    font-size: 12px;

    line-height: 1.65;
}


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

.home-capabilities {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 16px;

    margin-top: 20px;
}


.capability-card {
    position: relative;

    min-height: 330px;

    overflow: hidden;

    padding: 28px;

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

    border-radius: 20px;

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

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


.capability-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -120px;
    bottom: -120px;

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(47,144,255,.20),
            transparent 68%
        );

    transition: opacity .35s ease;
}


.capability-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(74,168,255,.24);

    box-shadow:
        0 28px 70px rgba(0,0,0,.25);
}


.capability-card:hover::before {
    opacity: 1;
}


.capability-card--large {
    background:
        linear-gradient(
            145deg,
            rgba(17,40,67,.78),
            rgba(11,21,39,.88)
        );
}


.capability-card__index {
    display: block;

    color: #58687e;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .13em;
}


.capability-card__icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 42px 0 20px;

    border:
        1px solid rgba(80,147,255,.16);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(25,191,255,.12),
            rgba(111,77,255,.16)
        );

    color: #56d9ff;

    font-weight: 800;
}


.capability-card__label {
    display: block;

    color: #4fd7ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.capability-card h3 {
    margin: 7px 0 12px;

    color: #fff;

    font-size: 22px;

    line-height: 1.18;

    letter-spacing: -.025em;
}


.capability-card--large h3 {
    font-size:
        clamp(1.8rem,2.5vw,2.7rem);
}


.capability-card p {
    margin: 0;

    color: #8494a8;

    font-size: 12px;

    line-height: 1.72;
}


.capability-card__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 20px;
}


.capability-card__tags span {
    padding: 6px 8px;

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

    border-radius: 7px;

    color: #93a3b7;

    font-size: 8px;
    font-weight: 700;
}


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

.home-results__bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 20px;

    padding: 26px 28px;

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

    border-radius: 17px;

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


.home-results__bottom span {
    display: block;

    color: #65758b;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.home-results__bottom strong {
    display: block;

    margin-top: 4px;

    color: #fff;

    font-size: 18px;
}


.home-results__link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #55d9ff;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}


.home-results__link span {
    color: inherit;

    transition: transform .25s ease;
}


.home-results__link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   GLOWS
   ========================================================= */

.home-results__glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .18;

    pointer-events: none;
}


.home-results__glow--one {
    left: -260px;
    top: 5%;

    background: #16c7ff;
}


.home-results__glow--two {
    right: -280px;
    bottom: 0;

    background: #7656ff;
}


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

@media (max-width: 1050px) {

    .home-results__stats {
        grid-template-columns:
            repeat(2,1fr);
    }

    .result-stat:nth-child(2) {
        border-right: 0;
    }

    .result-stat:nth-child(-n+2) {
        border-bottom:
            1px solid rgba(255,255,255,.06);
    }

    .home-capabilities {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media (max-width: 760px) {

    .home-results {
        padding: 80px 0;
    }

    .home-results__header {
        grid-template-columns: 1fr;

        gap: 25px;
    }

}


@media (max-width: 620px) {

    .home-results {
        padding: 65px 0;
    }

    .home-results__stats {
        grid-template-columns: 1fr;
    }

    .result-stat {
        border-right: 0;

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

    .result-stat:last-child {
        border-bottom: 0;
    }

    .home-capabilities {
        grid-template-columns: 1fr;
    }

    .capability-card {
        min-height: auto;
    }

    .home-results__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* =========================================================
   HOME PROCESS
   ========================================================= */

.home-process {
    position: relative;
    overflow: hidden;

    padding: 105px 0 100px;

    color: #fff;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(33, 185, 255, .12),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(112, 76, 255, .11),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #08111f 0%,
            #0b1729 48%,
            #091222 100%
        );

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


/* subtle technical grid */

.home-process::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .25;

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

    background-size: 52px 52px;
}


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

.home-process__header {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, .65fr);

    gap: 80px;

    align-items: end;

    padding-bottom: 48px;

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


.home-process__eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #4fd8ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.home-process__heading h2 {
    max-width: 780px;

    margin: 0;

    color: #fff;

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

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -.045em;
}


.home-process__heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #4ddcff,
            #657cff,
            #9d66ff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


.home-process__number {
    display: block;

    margin-bottom: 14px;

    color: #66768c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
}


.home-process__intro p {
    margin: 0;

    color: #93a3b7;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.process-timeline {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 0;

    padding-top: 70px;
}


/* Main horizontal line */

.process-timeline__line {
    position: absolute;

    left: 8%;
    right: 8%;

    top: 90px;

    height: 2px;

    overflow: hidden;

    background:
        rgba(255,255,255,.07);
}


.process-timeline__line span {
    display: block;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #22c9ff,
            #487cff 50%,
            #8d61ff
        );

    transform-origin: left center;

    animation:
        processLineFlow
        4.5s
        ease-in-out
        infinite alternate;

    box-shadow:
        0 0 18px rgba(54,154,255,.45);
}


/* =========================================================
   STEP
   ========================================================= */

.process-step {
    position: relative;

    padding: 0 15px;

    text-align: center;
}


.process-step__node {
    position: relative;
    z-index: 3;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 27px;

    border:
        1px solid rgba(83,166,255,.28);

    border-radius: 50%;

    background: #0b1627;

    box-shadow:
        0 0 0 7px #0b1627,
        0 0 0 8px rgba(255,255,255,.035);

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


.process-step__node::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3ed4ff,
            #6e67ff
        );

    box-shadow:
        0 0 14px rgba(61,190,255,.65);
}


.process-step__node span {
    position: absolute;

    top: -27px;

    color: #53647b;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;
}


.process-step:hover .process-step__node {
    transform: scale(1.13);

    border-color:
        rgba(80,208,255,.65);

    box-shadow:
        0 0 0 7px #0b1627,
        0 0 25px rgba(57,165,255,.22);
}


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

.process-step__content {
    padding: 0 7px;
}


.process-step__label {
    display: block;

    margin-bottom: 7px;

    color: #50d7ff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.process-step h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -.02em;
}


.process-step p {
    max-width: 175px;

    margin: 0 auto;

    color: #8292a8;

    font-size: 11px;

    line-height: 1.65;
}


.process-step__meta {
    margin-top: 17px;

    color: #586a81;

    font-size: 8px;
    font-weight: 700;

    line-height: 1.5;

    letter-spacing: .03em;
}


/* =========================================================
   IDEA → PRODUCT → GROWTH
   ========================================================= */

.process-journey {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(340px, .75fr);

    gap: 60px;

    align-items: center;

    margin-top: 75px;

    padding: 38px;

    overflow: hidden;

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

    border-radius: 22px;

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

    box-shadow:
        0 25px 65px rgba(0,0,0,.18);
}


.process-journey::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: 38%;

    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(44,153,255,.11),
            transparent 68%
        );

    pointer-events: none;
}


/* Journey visual */

.process-journey__visual {
    position: relative;
    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 18px;
}


.journey-point {
    text-align: center;
}


.journey-point__dot {
    width: 20px;
    height: 20px;

    display: block;

    margin: 0 auto 14px;

    border:
        2px solid #3ccfff;

    border-radius: 50%;

    background: #0b1627;

    box-shadow:
        0 0 20px rgba(60,207,255,.22);
}


.journey-point--product .journey-point__dot {
    width: 30px;
    height: 30px;

    border: 0;

    background:
        linear-gradient(
            135deg,
            #28cbff,
            #6b63ff
        );

    box-shadow:
        0 0 28px rgba(76,139,255,.35);
}


.journey-point--growth .journey-point__dot {
    width: 38px;
    height: 38px;

    border:
        1px solid rgba(160,104,255,.75);

    background:
        radial-gradient(
            circle,
            #8c65ff 0 20%,
            #10182d 22% 100%
        );

    box-shadow:
        0 0 30px rgba(139,95,255,.30);
}


.journey-point small {
    display: block;

    color: #5e7087;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.journey-point strong {
    display: block;

    margin-top: 4px;

    color: #fff;

    font-size: 15px;
}


/* connecting path */

.journey-path {
    position: relative;

    height: 2px;

    overflow: hidden;

    background:
        rgba(255,255,255,.07);
}


.journey-path span {
    position: absolute;

    width: 45%;
    height: 100%;

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

    animation:
        journeySignal
        2.8s
        linear
        infinite;
}


/* =========================================================
   JOURNEY MESSAGE
   ========================================================= */

.process-journey__message {
    position: relative;
    z-index: 2;

    padding-left: 40px;

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


.process-journey__message > span {
    display: block;

    margin-bottom: 10px;

    color: #50d8ff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .15em;
}


.process-journey__message h3 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(1.7rem,2.4vw,2.5rem);

    line-height: 1.13;

    letter-spacing: -.035em;
}


.process-journey__message h3 strong {
    display: block;

    color: #7b79ff;
}


.process-journey__message p {
    margin: 16px 0 0;

    color: #8292a7;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   GLOWS
   ========================================================= */

.home-process__glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .14;

    pointer-events: none;
}


.home-process__glow--one {
    right: -260px;
    top: 5%;

    background: #1cc7ff;
}


.home-process__glow--two {
    left: -270px;
    bottom: -5%;

    background: #7557ff;
}


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

@media (max-width: 1050px) {

    .process-timeline {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 55px;
    }

    .process-timeline__line {
        display: none;
    }

}


@media (max-width: 820px) {

    .home-process {
        padding: 80px 0;
    }

    .home-process__header {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .process-journey {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .process-journey__message {
        padding-left: 0;
        padding-top: 30px;

        border-left: 0;

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

}


@media (max-width: 620px) {

    .home-process {
        padding: 65px 0;
    }

    .process-timeline {
        display: block;

        padding-top: 45px;
    }


    .process-step {
        position: relative;

        display: grid;

        grid-template-columns:
            55px 1fr;

        gap: 18px;

        padding: 0 0 38px;

        text-align: left;
    }


    .process-step::before {
        content: "";

        position: absolute;

        left: 20px;
        top: 42px;

        width: 1px;
        height: calc(100% - 35px);

        background:
            linear-gradient(
                #3ccfff,
                rgba(105,91,255,.35)
            );
    }


    .process-step:last-child::before {
        display: none;
    }


    .process-step__node {
        margin: 0;
    }


    .process-step__content {
        padding: 0;
    }


    .process-step p {
        max-width: none;

        margin: 0;
    }


    .process-journey {
        margin-top: 25px;

        padding: 27px 20px;
    }


    .process-journey__visual {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .journey-path {
        width: 2px;
        height: 38px;

        margin: auto;
    }


    .journey-path span {
        width: 100%;
        height: 45%;
    }

}

/* =========================================================
   HOME TECHNOLOGY STACK
   ========================================================= */

.home-stack {
    position: relative;
    overflow: hidden;

    padding: 105px 0 100px;

    color: #fff;

    background:
        radial-gradient(
            circle at 13% 45%,
            rgba(25, 190, 255, .12),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(111, 76, 255, .12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #091525 0%,
            #0c1b30 48%,
            #0a1427 100%
        );

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


.home-stack::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .26;

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

    background-size: 52px 52px;
}


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

.home-stack__header {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(300px,.65fr);

    gap: 80px;

    align-items: end;

    padding-bottom: 45px;

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


.home-stack__eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #50d9ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.home-stack__header h2 {
    max-width: 820px;

    margin: 0;

    color: #fff;

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

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -.045em;
}


.home-stack__header h2 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #4bdcff,
            #647cff 55%,
            #9c65ff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


.home-stack__number {
    display: block;

    margin-bottom: 14px;

    color: #68798f;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
}


.home-stack__intro p {
    margin: 0;

    color: #93a3b8;

    font-size: 15px;

    line-height: 1.75;
}


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

.home-stack__layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(380px,.85fr)
        minmax(0,1.35fr);

    gap: 30px;

    margin-top: 38px;
}


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

.stack-core {
    position: relative;

    min-height: 610px;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        radial-gradient(
            circle at center,
            rgba(49,117,255,.13),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 30px 75px rgba(0,0,0,.20);
}


/* grid inside visual */

.stack-core__grid {
    position: absolute;
    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(105,155,215,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(105,155,215,.06) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    mask-image:
        radial-gradient(
            circle at center,
            #000,
            transparent 73%
        );
}


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

.stack-core__orbit {
    position: absolute;

    left: 50%;
    top: 46%;

    border:
        1px solid rgba(82,154,255,.13);

    border-radius: 50%;

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


.stack-core__orbit--one {
    width: 180px;
    height: 180px;

    animation:
        stackOrbitSpin
        18s linear infinite;
}


.stack-core__orbit--two {
    width: 310px;
    height: 310px;

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

    animation:
        stackOrbitSpinReverse
        24s linear infinite;
}


.stack-core__orbit--three {
    width: 440px;
    height: 440px;

    border-color:
        rgba(132,91,255,.09);

    animation:
        stackOrbitSpin
        32s linear infinite;
}


/* orbit accent points */

.stack-core__orbit::before {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    left: 50%;
    top: -4px;

    border-radius: 50%;

    background: #4bd8ff;

    box-shadow:
        0 0 18px rgba(75,216,255,.65);
}


.stack-core__orbit--two::before {
    background: #6c75ff;

    box-shadow:
        0 0 18px rgba(108,117,255,.60);
}


.stack-core__orbit--three::before {
    background: #9b65ff;

    box-shadow:
        0 0 18px rgba(155,101,255,.55);
}


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

.stack-core__center {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 46%;

    width: 125px;
    height: 125px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(91,177,255,.30);

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #102640,
            #111b3d
        );

    box-shadow:
        0 0 60px rgba(43,130,255,.20),
        inset 0 0 30px rgba(65,151,255,.07);

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


.stack-core__center > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 8px;

    border-radius: 12px;

    color: #fff;

    font-size: 22px;
    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            #25caff,
            #6570ff,
            #9a60ff
        );

    box-shadow:
        0 0 25px rgba(74,134,255,.30);
}


.stack-core__center small {
    color: #6d8099;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .16em;
}


.stack-core__center strong {
    margin-top: 2px;

    color: #fff;

    font-size: 12px;

    letter-spacing: .08em;
}


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

.stack-core__node {
    position: absolute;
    z-index: 5;

    min-width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border:
        1px solid rgba(92,170,255,.18);

    border-radius: 13px;

    background:
        rgba(9,22,39,.92);

    color: #9cc8e8;

    font-size: 9px;
    font-weight: 800;

    box-shadow:
        0 12px 30px rgba(0,0,0,.25);

    backdrop-filter: blur(8px);

    animation:
        stackNodeFloat
        5s ease-in-out infinite;
}


.stack-core__node--php {
    left: 15%;
    top: 22%;
}


.stack-core__node--wp {
    right: 13%;
    top: 19%;

    animation-delay: -.8s;
}


.stack-core__node--js {
    right: 9%;
    top: 51%;

    animation-delay: -1.6s;
}


.stack-core__node--api {
    right: 20%;
    bottom: 14%;

    animation-delay: -2.4s;
}


.stack-core__node--db {
    left: 18%;
    bottom: 13%;

    animation-delay: -3.1s;
}


.stack-core__node--git {
    left: 8%;
    top: 52%;

    animation-delay: -3.8s;
}


/* =========================================================
   STATUS
   ========================================================= */

.stack-core__status {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 24px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 10px;

    padding: 12px 14px;

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

    border-radius: 11px;

    background:
        rgba(5,14,27,.68);

    backdrop-filter: blur(10px);
}


.stack-core__status i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #42e5a3;

    box-shadow:
        0 0 12px rgba(66,229,163,.55);
}


.stack-core__status span {
    color: #71839a;

    font-size: 9px;
}


.stack-core__status strong {
    color: #b7c6d8;

    font-size: 9px;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.stack-categories {
    display: grid;

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

    gap: 14px;
}


.stack-category {
    position: relative;

    min-height: 188px;

    padding: 24px;

    overflow: hidden;

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

    border-radius: 18px;

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

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


.stack-category::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(49,153,255,.18),
            transparent 68%
        );

    transition: opacity .3s ease;
}


.stack-category:hover {
    transform: translateY(-5px);

    border-color:
        rgba(74,174,255,.24);

    background:
        linear-gradient(
            145deg,
            rgba(33,80,127,.13),
            rgba(255,255,255,.012)
        );
}


.stack-category:hover::after {
    opacity: 1;
}


/* category header */

.stack-category__head {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 18px;

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


.stack-category__head > div {
    display: flex;
    align-items: center;

    gap: 10px;
}


.stack-category__head span {
    color: #53667e;

    font-size: 8px;
    font-weight: 800;
}


.stack-category__head h3 {
    margin: 0;

    color: #fff;

    font-size: 17px;

    letter-spacing: -.02em;
}


.stack-category__head small {
    color: #4dcfff;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .14em;
}


/* technology chips */

.stack-category__items {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    padding-top: 18px;
}


.stack-category__items span {
    padding: 7px 9px;

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

    border-radius: 7px;

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

    color: #8fa0b5;

    font-size: 9px;
    font-weight: 700;

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


.stack-category:hover
.stack-category__items span {
    color: #aebed0;
}


.stack-category__items span:hover {
    color: #54d9ff;

    border-color:
        rgba(70,202,255,.22);

    background:
        rgba(41,174,255,.07);
}


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

.home-stack__bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 20px;

    padding: 26px 28px;

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

    border-radius: 17px;

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


.home-stack__bottom > div > span {
    display: block;

    margin-bottom: 5px;

    color: #596d86;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .14em;
}


.home-stack__bottom strong {
    color: #fff;

    font-size: 17px;
}


.home-stack__bottom > a {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    white-space: nowrap;

    color: #54d9ff;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}


.home-stack__bottom > a span {
    transition: transform .25s ease;
}


.home-stack__bottom > a:hover span {
    transform: translateX(5px);
}


/* =========================================================
   GLOWS
   ========================================================= */

.home-stack__glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .15;

    pointer-events: none;
}


.home-stack__glow--one {
    left: -280px;
    top: 25%;

    background: #1fc7ff;
}


.home-stack__glow--two {
    right: -280px;
    bottom: 3%;

    background: #7656ff;
}


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

@media (max-width: 1000px) {

    .home-stack__layout {
        grid-template-columns: 1fr;
    }

    .stack-core {
        min-height: 560px;
    }

}


@media (max-width: 760px) {

    .home-stack {
        padding: 80px 0;
    }

    .home-stack__header {
        grid-template-columns: 1fr;

        gap: 25px;
    }

}


@media (max-width: 620px) {

    .home-stack {
        padding: 65px 0;
    }

    .stack-categories {
        grid-template-columns: 1fr;
    }

    .stack-core {
        min-height: 500px;
    }

    .stack-core__orbit--three {
        width: 360px;
        height: 360px;
    }

    .stack-core__orbit--two {
        width: 260px;
        height: 260px;
    }

    .stack-core__orbit--one {
        width: 160px;
        height: 160px;
    }

    .home-stack__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

}

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

.home-final-cta {
    position: relative;
    overflow: hidden;

    padding: 100px 0 85px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(32, 198, 255, .16),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(119, 77, 255, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050914 0%,
            #07101f 48%,
            #060a17 100%
        );

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


.home-final-cta__panel {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(360px, .65fr);

    gap: 70px;

    align-items: center;

    overflow: hidden;

    padding: 58px;

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

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,.28);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}


.home-final-cta__panel::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -160px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(30, 199, 255, .19),
            transparent 68%
        );

    pointer-events: none;
}


.home-final-cta__panel::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(119, 77, 255, .18),
            transparent 68%
        );

    pointer-events: none;
}


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

.home-final-cta__content {
    position: relative;
    z-index: 3;

    max-width: 760px;
}


.home-final-cta__eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    color: #4fd8ff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.home-final-cta h2 {
    margin: 0;

    color: #fff;

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

    font-weight: 800;

    line-height: .98;

    letter-spacing: -.05em;
}


.home-final-cta h2 span {
    display: block;

    margin-top: 5px;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #4cdcff,
            #647cff 55%,
            #9f67ff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


.home-final-cta__content > p {
    max-width: 650px;

    margin: 24px 0 0;

    color: #98a7ba;

    font-size: 15px;

    line-height: 1.8;
}


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

.home-final-cta__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 31px;
}


.home-final-cta__secondary {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 21px;

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

    border-radius: 12px;

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

    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

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


.home-final-cta__secondary:hover {
    transform: translateY(-2px);

    border-color:
        rgba(72,207,255,.30);

    background:
        rgba(46,176,255,.05);
}


.home-final-cta__secondary span {
    color: #55d9ff;

    transition: transform .25s ease;
}


.home-final-cta__secondary:hover span {
    transform: translateX(5px);
}


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

.home-final-cta__contact {
    position: relative;
    z-index: 3;

    padding: 28px;

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

    border-radius: 20px;

    background:
        rgba(5,13,25,.58);

    box-shadow:
        0 25px 65px rgba(0,0,0,.24);
}


.home-final-cta__contact-head {
    padding-bottom: 20px;

    margin-bottom: 8px;

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


.home-final-cta__contact-head span {
    display: block;

    color: #59708a;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .14em;
}


.home-final-cta__contact-head strong {
    display: block;

    margin-top: 5px;

    color: #fff;

    font-size: 22px;
}


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

.final-contact-item {
    display: grid;

    grid-template-columns:
        42px 1fr auto;

    gap: 13px;

    align-items: center;

    padding: 16px 0;

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

    text-decoration: none;

    transition:
        transform .25s ease;
}


.final-contact-item:last-child {
    border-bottom: 0;
}


a.final-contact-item:hover {
    transform: translateX(5px);
}


.final-contact-item__icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(84,164,255,.14);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(31,190,255,.10),
            rgba(111,79,255,.13)
        );

    color: #54d9ff;

    font-size: 12px;
    font-weight: 900;
}


.final-contact-item span {
    display: block;

    color: #66788f;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.final-contact-item strong {
    display: block;

    margin-top: 3px;

    color: #dbe5f1;

    font-size: 12px;
}


.final-contact-item > i {
    color: #52677f;

    font-size: 10px;
    font-style: normal;
}


/* =========================================================
   META STRIP
   ========================================================= */

.home-final-cta__meta {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    padding-top: 27px;

    color: #5f7086;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.home-final-cta__meta i {
    color: #2f506d;

    font-style: normal;
}


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

.home-final-cta__orb {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .18;

    pointer-events: none;
}


.home-final-cta__orb--one {
    left: -260px;
    top: -10%;

    background: #1bc6ff;

    animation:
        finalCtaGlowOne
        14s ease-in-out
        infinite alternate;
}


.home-final-cta__orb--two {
    right: -280px;
    bottom: -30%;

    background: #7856ff;

    animation:
        finalCtaGlowTwo
        17s ease-in-out
        infinite alternate;
}


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

@media (max-width: 950px) {

    .home-final-cta__panel {
        grid-template-columns: 1fr;

        gap: 40px;

        padding: 45px;
    }

}


@media (max-width: 620px) {

    .home-final-cta {
        padding: 70px 0 60px;
    }

    .home-final-cta__panel {
        padding: 30px 22px;

        border-radius: 22px;
    }

    .home-final-cta h2 {
        font-size:
            clamp(2.6rem,12vw,4rem);
    }

    .home-final-cta__actions {
        flex-direction: column;
    }

    .home-final-cta__actions .fink-btn,
    .home-final-cta__secondary {
        width: 100%;
    }

    .home-final-cta__contact {
        padding: 22px;
    }

}