/* =========================================================
   HUBITBRIDGE — SERVICES HERO
========================================================= */


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

.services-hero {

    position: relative;

    width: 100%;

    height: 100svh;

    min-height: 680px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #0b0d12;

    color: #ffffff;

    z-index: 1;

    /*
     * Header-safe spacing.
     *
     * This prevents the hero eyebrow/title
     * from moving underneath the header.
     */
    padding-top: 72px;

    box-sizing: border-box;
}


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

.services-hero-grid {

    position: absolute;

    inset: 0;

    z-index: 0;

    opacity: .18;

    background-image:

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

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

    background-size: 70px 70px;

    pointer-events: none;
}


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

.services-hero-glow {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .16;

    pointer-events: none;

    z-index: 0;
}


.services-hero-glow-left {

    left: -160px;

    top: 15%;

    background:
        var(--primary);
}


.services-hero-glow-right {

    right: -180px;

    bottom: -100px;

    background:
        var(--secondary);
}


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

.services-hero-content {

    position: relative;

    z-index: 10;

    width:
        min(900px,
            calc(100% - 40px));

    text-align: center;

    /*
     * Small downward adjustment after
     * header-safe padding.
     */
    transform: translateY(18px);
}


/* =========================================================
   EYEBROW
========================================================= */

.services-hero-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 25px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

    line-height: 1;

    letter-spacing: .18em;

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

    text-transform: uppercase;

    /*
     * Initial state for GSAP
     */
    opacity: 0;

    transform:
        translateY(18px);
}


.services-hero-eyebrow .hero-eyebrow-dot {

    color:
        var(--primary);
}


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

.services-hero-title {

    margin: 0;

    font-size:
        clamp(52px,
            7.5vw,
            112px);

    line-height: .94;

    letter-spacing: -.065em;

    font-weight: 700;

    color: #ffffff;
}


/*
 * Each line acts as a clipping mask.
 */

.hero-title-line {

    display: block;

    overflow: hidden;

    padding-bottom: .04em;
}


/*
 * Actual animated element
 */

.hero-title-line-inner {

    display: block;

    transform: translateY(0);
}


/* =========================================================
   GRADIENT TITLE
========================================================= */

.services-hero-title-gradient {

    background:
        linear-gradient(110deg,
            #3b82f6,
            #7c3aed);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.services-hero-description {

    max-width: 600px;

    margin:
        32px auto 0;

    font-size: 16px;

    line-height: 1.75;

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

    opacity: 0;

    transform:
        translateY(22px);
}


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

.services-hero-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 32px;

    padding:
        7px 7px 7px 22px;

    border-radius: 999px;

    background: #ffffff;

    color: #111827;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    opacity: 0;

    transform:
        translateY(22px);

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


.services-hero-button:hover {

    transform:
        translateY(-3px);

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


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

.services-hero-button-icon {

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--primary);

    color: #ffffff;
}


.services-hero-button-icon svg {

    width: 16px;
    height: 16px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   FLOATING IMAGES
========================================================= */

.hero-float {

    position: absolute;

    z-index: 4;

    overflow: hidden;

    background: #151923;

    border-radius: 3px;

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

    opacity: 0;

    pointer-events: none;
}


.hero-float img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   IMAGE 01
========================================================= */

.hero-float-1 {

    width: 130px;

    height: 165px;

    left: 9%;

    top: 17%;

    transform:
        rotate(-5deg) scale(.92);
}


/* =========================================================
   IMAGE 02
========================================================= */

.hero-float-2 {

    width: 145px;

    height: 110px;

    left: 15%;

    bottom: 17%;

    transform:
        rotate(4deg) scale(.92);
}


/* =========================================================
   IMAGE 03
========================================================= */

.hero-float-3 {

    width: 125px;

    height: 155px;

    left: 28%;

    top: 12%;

    transform:
        rotate(-2deg) scale(.92);
}


/* =========================================================
   IMAGE 04
========================================================= */

.hero-float-4 {

    width: 135px;

    height: 110px;

    right: 26%;

    bottom: 14%;

    transform:
        rotate(3deg) scale(.92);
}


/* =========================================================
   IMAGE 05
========================================================= */

.hero-float-5 {

    width: 140px;

    height: 170px;

    right: 9%;

    top: 16%;

    transform:
        rotate(5deg) scale(.92);
}


/* =========================================================
   IMAGE 06
========================================================= */

.hero-float-6 {

    width: 130px;

    height: 105px;

    right: 15%;

    bottom: 26%;

    transform:
        rotate(-4deg) scale(.92);
}


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

.services-hero-bottom {

    position: absolute;

    left: 35px;

    right: 35px;

    bottom: 28px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 13px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 9px;

    letter-spacing: .16em;

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

    opacity: 0;
}


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

.services-hero-bottom-line {

    width: 35px;

    height: 1px;

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


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

@media (max-width: 900px) {

    .services-hero {

        min-height: 620px;

        padding-top: 64px;
    }


    .services-hero-content {

        transform:
            translateY(12px);
    }


    .services-hero-title {

        font-size:
            clamp(46px,
                11vw,
                76px);
    }


    .services-hero-description {

        font-size: 14px;

        max-width: 500px;
    }


    /* Floating images */

    .hero-float-1 {

        left: 3%;
    }


    .hero-float-2 {

        left: 7%;
    }


    .hero-float-3 {

        left: 18%;
    }


    .hero-float-4 {

        right: 18%;
    }


    .hero-float-5 {

        right: 3%;
    }


    .hero-float-6 {

        right: 7%;
    }

}


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

@media (max-width: 800px) {

    .services-hero {

        min-height: 620px;

        padding-top: 58px;
    }


    .services-hero-content {

        width:
            calc(100% - 36px);

        transform:
            translateY(8px);
    }


    .services-hero-title {

        font-size:
            clamp(46px,
                11vw,
                76px);
    }


    .services-hero-description {

        font-size: 14px;
    }


    .hero-float-1 {

        left: 3%;
    }


    .hero-float-2 {

        left: 7%;
    }


    .hero-float-3 {

        left: 18%;
    }


    .hero-float-4 {

        right: 18%;
    }


    .hero-float-5 {

        right: 3%;
    }


    .hero-float-6 {

        right: 7%;
    }

}


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

@media (max-width: 600px) {

    .services-hero {

        min-height: 620px;

        padding-top: 50px;
    }


    .services-hero-content {

        width:
            calc(100% - 28px);

        transform:
            translateY(0);
    }


    /* Eyebrow */

    .services-hero-eyebrow {

        gap: 7px;

        margin-bottom: 20px;

        font-size: 8px;

        letter-spacing: .14em;
    }


    /* Title */

    .services-hero-title {

        font-size:
            clamp(42px,
                12vw,
                62px);

        line-height: .95;
    }


    /* Description */

    .services-hero-description {

        max-width: 420px;

        margin-top: 24px;

        font-size: 13px;

        line-height: 1.65;
    }


    /* Button */

    .services-hero-button {

        margin-top: 26px;

        padding:
            6px 6px 6px 18px;

        font-size: 12px;
    }


    .services-hero-button-icon {

        width: 34px;

        height: 34px;
    }


    .services-hero-button-icon svg {

        width: 14px;

        height: 14px;
    }


    /* Bottom */

    .services-hero-bottom {

        left: 18px;

        right: 18px;

        bottom: 18px;

        gap: 8px;

        font-size: 7px;

        letter-spacing: .12em;
    }


    .services-hero-bottom-line {

        width: 18px;
    }


    /* Floating images */

    .hero-float-1 {

        width: 80px;

        height: 105px;

        left: 3%;

        top: 18%;
    }


    .hero-float-2 {

        width: 85px;

        height: 70px;

        left: 5%;

        bottom: 18%;
    }


    .hero-float-3,
    .hero-float-4 {

        display: none;
    }


    .hero-float-5 {

        width: 82px;

        height: 105px;

        right: 3%;

        top: 19%;
    }


    .hero-float-6 {

        width: 85px;

        height: 70px;

        right: 5%;

        bottom: 22%;
    }

}


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

@media (max-width: 380px) {

    .services-hero {

        padding-top: 45px;
    }


    .services-hero-title {

        font-size: 40px;
    }


    .services-hero-description {

        font-size: 12px;
    }


    .services-hero-bottom {

        font-size: 6px;

        gap: 6px;
    }


    .services-hero-bottom-line {

        width: 12px;
    }


    .hero-float-1 {

        width: 68px;

        height: 90px;
    }


    .hero-float-2 {

        width: 72px;

        height: 60px;
    }


    .hero-float-5 {

        width: 70px;

        height: 92px;
    }


    .hero-float-6 {

        width: 72px;

        height: 60px;
    }

}


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

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

    .hero-title-line-inner,
    .services-hero-eyebrow,
    .services-hero-description,
    .services-hero-button,
    .hero-float,
    .services-hero-bottom {

        opacity: 1 !important;

        transform: none !important;
    }

}


/* =========================================================
   HUBITBRIDGE — SERVICES SECTION
========================================================= */

.hb-services {
    position: relative;
    width: 100%;
    padding: 150px 0 50px;
    background: var(--bg);
    overflow: hidden;
    z-index: 5;
}

.hb-services-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


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

.hb-services-header {
    margin-bottom: 72px;
}

.hb-services-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 28px;

    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;

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

.hb-services-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 24px;

    border-radius: 999px;

    background: #EAF1FF;
    color: var(--primary);

    font-size: 10px;
    letter-spacing: .08em;
}

.hb-services-eyebrow-line {
    width: 34px;
    height: 1px;
    background: var(--border-strong);
}


.hb-services-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .55fr);
    align-items: end;
    gap: 80px;
}


.hb-services-title {
    margin: 0;

    max-width: 850px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(54px, 6vw, 92px);
    font-weight: 650;
    line-height: .98;
    letter-spacing: -.065em;

    color: var(--dark);
}

.hb-services-title span {
    display: block;

    background:
        linear-gradient(100deg,
            #2563EB 0%,
            #4F46E5 50%,
            #7C3AED 100%);

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


.hb-services-intro {
    padding-bottom: 8px;
}

.hb-services-intro p {
    max-width: 450px;

    margin: 0 0 28px;

    font-size: 16px;
    line-height: 1.75;

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


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

.hb-services-main-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 52px;
    padding: 6px 7px 6px 20px;

    border-radius: 999px;

    background: var(--dark);
    color: #fff;

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

    text-decoration: none;

    transition:
        transform .35s ease,
        background .35s ease;
}

.hb-services-main-link:hover {
    transform: translateY(-3px);
    background: var(--primary);
}


.hb-services-link-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff;
    color: var(--dark);

    transition:
        transform .35s ease,
        color .35s ease;
}

.hb-services-main-link:hover .hb-services-link-icon {
    transform: translateX(3px);
    color: var(--primary);
}

.hb-services-main-link svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.hb-services-grid {
    display: grid;

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

    gap: 18px;
}


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

.hb-service-card {
    position: relative;

    display: block;

    min-height: 430px;

    overflow: hidden;

    border: 1px solid rgba(203, 213, 225, .75);
    border-radius: 22px;

    background: #fff;

    color: inherit;
    text-decoration: none;

    isolation: isolate;

    transition:
        transform .55s cubic-bezier(.2, .75, .25, 1),
        box-shadow .55s cubic-bezier(.2, .75, .25, 1),
        border-color .35s ease;
}

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

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

    box-shadow:
        0 24px 60px rgba(15, 23, 42, .10);
}


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

.hb-service-image {
    position: absolute;
    inset: 0;

    z-index: -2;

    overflow: hidden;
}

.hb-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    opacity: .16;

    transform: scale(1.02);

    filter: saturate(.8);

    transition:
        transform .9s cubic-bezier(.2, .75, .25, 1),
        opacity .5s ease,
        filter .5s ease;
}

.hb-service-card:hover .hb-service-image img {
    transform: scale(1.10);

    opacity: .27;

    filter: saturate(1);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.hb-service-card-overlay {
    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .88) 0%,
            rgba(255, 255, 255, .96) 50%,
            rgba(255, 255, 255, .99) 100%);

    transition:
        background .5s ease;
}

.hb-service-card:hover .hb-service-card-overlay {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .82) 0%,
            rgba(255, 255, 255, .94) 55%,
            rgba(255, 255, 255, .98) 100%);
}


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

.hb-service-card-content {
    height: 100%;

    min-height: 430px;

    display: flex;
    flex-direction: column;

    padding: 27px 27px 24px;

    box-sizing: border-box;
}


.hb-service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.hb-service-index {
    font-family: "JetBrains Mono", monospace;

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

    color: var(--primary);

    letter-spacing: .08em;
}


.hb-service-arrow {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

    color: var(--dark);

    transition:
        transform .45s cubic-bezier(.2, .75, .25, 1),
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.hb-service-card:hover .hb-service-arrow {
    transform: rotate(-45deg);

    border-color: var(--primary);

    background: var(--primary);

    color: #fff;
}

.hb-service-arrow svg,
.hb-service-card-bottom svg,
.hb-service-explore svg,
.hb-services-footer svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   STANDARD CARD BODY
========================================================= */

.hb-service-standard-body {
    margin-top: auto;
    margin-bottom: auto;

    padding: 45px 0 30px;
}


.hb-service-label {
    margin-bottom: 14px;

    font-family: "JetBrains Mono", monospace;

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

    letter-spacing: .12em;
    text-transform: uppercase;

    color: var(--text-muted);

    transition: color .35s ease;
}

.hb-service-card:hover .hb-service-label {
    color: var(--primary);
}


.hb-service-standard h3 {
    max-width: 340px;

    margin: 0 0 17px;

    font-size: clamp(27px, 2.2vw, 38px);
    font-weight: 650;

    line-height: 1.04;

    letter-spacing: -.045em;

    color: var(--dark);
}

.hb-service-standard h3 span {
    display: block;

    color: var(--primary);

    transition: color .35s ease;
}


.hb-service-standard p {
    max-width: 390px;

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

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


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

.hb-service-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 23px;
}

.hb-service-tags span {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding: 0 10px;

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

    border-radius: 999px;

    background: rgba(248, 250, 252, .72);

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

    color: var(--text-secondary);

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

.hb-service-card:hover .hb-service-tags span {
    border-color: rgba(37, 99, 235, .16);

    background: rgba(239, 246, 255, .9);

    color: var(--primary);
}


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

.hb-service-card-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 18px;

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

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

    color: var(--dark);
}

.hb-service-card-bottom svg {
    transition: transform .35s ease;
}

.hb-service-card:hover .hb-service-card-bottom svg {
    transform: translateX(5px);
}


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

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

    min-height: 500px;

    border: none;

    background: #07111f;

    color: #fff;
}

.hb-service-featured:hover {
    border-color: transparent;
}


.hb-service-featured-bg {
    position: absolute;
    inset: 0;

    z-index: -4;

    background:
        radial-gradient(circle at 68% 50%,
            rgba(37, 99, 235, .42),
            transparent 32%),
        radial-gradient(circle at 90% 20%,
            rgba(124, 58, 237, .30),
            transparent 28%),
        linear-gradient(110deg,
            #07111f 0%,
            #0b1729 50%,
            #08101c 100%);
}


.hb-service-featured::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(90deg,
            rgba(7, 17, 31, .98) 0%,
            rgba(7, 17, 31, .90) 40%,
            rgba(7, 17, 31, .20) 72%,
            rgba(7, 17, 31, .58) 100%);
}


.hb-service-featured-image {
    position: absolute;

    top: 0;
    right: 0;

    width: 54%;
    height: 100%;

    z-index: -2;

    overflow: hidden;
}

.hb-service-featured-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            #07111f 0%,
            rgba(7, 17, 31, .45) 25%,
            rgba(7, 17, 31, 0) 70%);
}

.hb-service-featured-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .78;

    transform: scale(1.02);

    transition:
        transform 1s cubic-bezier(.2, .75, .25, 1),
        opacity .6s ease;
}

.hb-service-featured:hover .hb-service-featured-image img {
    transform: scale(1.08);

    opacity: .9;
}


.hb-service-featured-content {
    position: relative;

    z-index: 2;

    height: 100%;

    min-height: 500px;

    padding: 32px 36px;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}


.hb-service-featured .hb-service-card-top {
    color: #fff;
}

.hb-service-featured .hb-service-index {
    color: #60A5FA;
}

.hb-service-featured .hb-service-arrow {
    border-color: rgba(255, 255, 255, .22);

    color: #fff;
}

.hb-service-featured:hover .hb-service-arrow {
    border-color: #60A5FA;

    background: #2563EB;
}


.hb-service-featured-main {
    width: min(570px, 52%);

    margin-top: auto;
    margin-bottom: auto;
}


.hb-service-featured .hb-service-label {
    color: #60A5FA;
}


.hb-service-featured h3 {
    margin: 0 0 18px;

    font-size: clamp(42px, 4vw, 65px);

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 650;

    color: #fff;
}

.hb-service-featured h3 span {
    color: #60A5FA;
}


.hb-service-featured p {
    max-width: 530px;

    margin: 0 0 25px;

    font-size: 15px;

    line-height: 1.7;

    color: rgba(255, 255, 255, .70);
}


/* =========================================================
   SALESFORCE PRODUCTS
========================================================= */

.hb-salesforce-products {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    max-width: 560px;

    margin-bottom: 26px;
}

.hb-salesforce-products span {
    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding: 0 12px;

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

    border-radius: 999px;

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

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

    font-size: 10px;

    font-weight: 600;

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

.hb-service-featured:hover .hb-salesforce-products span {
    border-color: rgba(96, 165, 250, .28);

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

    color: #fff;
}


/* =========================================================
   FEATURED EXPLORE
========================================================= */

.hb-service-explore {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

    font-weight: 650;

    color: #fff;
}

.hb-service-explore svg {
    transition: transform .35s ease;
}

.hb-service-featured:hover .hb-service-explore svg {
    transform: translateX(5px);
}


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

.hb-services-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 45px;

    padding-top: 28px;

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

.hb-services-footer>span {
    font-family: "JetBrains Mono", monospace;

    font-size: 10px;

    letter-spacing: .12em;

    color: var(--text-muted);
}

.hb-services-footer a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 650;

    color: var(--dark);

    text-decoration: none;

    transition: color .3s ease;
}

.hb-services-footer a:hover {
    color: var(--primary);
}

.hb-services-footer svg {
    transition: transform .3s ease;
}

.hb-services-footer a:hover svg {
    transform: translateX(5px);
}


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

@media (max-width: 1050px) {

    .hb-services {
        padding: 120px 0 110px;
    }

    .hb-services-container {
        width: min(100% - 48px, 900px);
    }

    .hb-services-heading-row {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .hb-services-title {
        max-width: 760px;
    }

    .hb-services-intro {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 30px;
    }

    .hb-services-intro p {
        margin-bottom: 0;
    }

    .hb-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hb-service-featured {
        grid-column: 1 / -1;
    }

    .hb-service-featured-main {
        width: 60%;
    }

}


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

@media (max-width: 700px) {

    .hb-services {
        padding: 90px 0 85px;
    }

    .hb-services-container {
        width: calc(100% - 32px);
    }


    .hb-services-header {
        margin-bottom: 45px;
    }

    .hb-services-eyebrow {
        margin-bottom: 22px;
    }

    .hb-services-heading-row {
        gap: 24px;
    }

    .hb-services-title {
        font-size: clamp(42px, 12vw, 60px);

        line-height: .98;
    }

    .hb-services-intro {
        display: block;
    }

    .hb-services-intro p {
        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 22px;
    }


    .hb-services-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .hb-service-card {
        min-height: 430px;

        border-radius: 18px;
    }


    .hb-service-card-content {
        min-height: 430px;

        padding: 22px;
    }


    .hb-service-standard-body {
        padding: 30px 0 20px;
    }


    .hb-service-standard h3 {
        font-size: 31px;
    }


    /* Salesforce */

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

    .hb-service-featured-content {
        min-height: 570px;

        padding: 22px;
    }

    .hb-service-featured-image {
        width: 100%;

        height: 55%;

        top: auto;
        bottom: 0;
    }

    .hb-service-featured-image::after {
        background:
            linear-gradient(180deg,
                #07111f 0%,
                rgba(7, 17, 31, .35) 40%,
                rgba(7, 17, 31, 0) 100%);
    }

    .hb-service-featured::after {
        background:
            linear-gradient(180deg,
                rgba(7, 17, 31, .98) 0%,
                rgba(7, 17, 31, .84) 48%,
                rgba(7, 17, 31, .15) 100%);
    }

    .hb-service-featured-main {
        width: 100%;

        margin-top: 45px;

        margin-bottom: auto;
    }

    .hb-service-featured h3 {
        font-size: 43px;
    }

    .hb-service-featured p {
        font-size: 13px;
    }

    .hb-salesforce-products {
        gap: 6px;

        max-width: 100%;
    }

    .hb-salesforce-products span {
        min-height: 27px;

        padding: 0 9px;

        font-size: 9px;
    }


    .hb-services-footer {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 30px;

        gap: 15px;
    }

}


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

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

    .hb-service-card,
    .hb-service-image img,
    .hb-service-featured-image img,
    .hb-service-arrow,
    .hb-service-tags span,
    .hb-service-card-bottom svg,
    .hb-service-explore svg,
    .hb-services-main-link,
    .hb-services-link-icon {
        transition: none !important;
    }

}

/* =========================================================
   HUBITBRIDGE — HOW WE WORK
========================================================= */

.hb-process {
    position: relative;

    width: 100%;

    padding: 145px 0 120px;

    background: var(--surface);

    overflow: hidden;

    z-index: 4;
}


.hb-process-container {
    width: min(1380px, calc(100% - 80px));

    margin: 0 auto;
}


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

.hb-process-header {
    margin-bottom: 85px;
}


.hb-process-eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

    font-family: "JetBrains Mono", monospace;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;

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


.hb-process-number {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 24px;

    border-radius: 999px;

    background: #EAF1FF;

    color: var(--primary);

    font-size: 10px;

    letter-spacing: .08em;
}


.hb-process-eyebrow-line {
    width: 34px;

    height: 1px;

    background: var(--border-strong);
}


.hb-process-heading-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr) minmax(280px, .55fr);

    align-items: end;

    gap: 80px;
}


.hb-process-title {
    margin: 0;

    max-width: 820px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(56px, 6vw, 92px);

    font-weight: 650;

    line-height: .98;

    letter-spacing: -.065em;

    color: var(--dark);
}


.hb-process-title span {
    display: block;

    background:
        linear-gradient(100deg,
            #2563EB 0%,
            #4F46E5 50%,
            #7C3AED 100%);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.hb-process-intro {
    padding-bottom: 8px;
}


.hb-process-intro p {
    max-width: 450px;

    margin: 0 0 28px;

    font-size: 16px;

    line-height: 1.75;

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


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

.hb-process-cta {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 52px;

    padding: 6px 7px 6px 20px;

    border-radius: 999px;

    background: var(--dark);

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform .35s ease,
        background .35s ease;
}


.hb-process-cta:hover {
    transform: translateY(-3px);

    background: var(--primary);
}


.hb-process-cta-icon {
    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #fff;

    color: var(--dark);

    transition:
        transform .35s ease,
        color .35s ease;
}


.hb-process-cta:hover .hb-process-cta-icon {
    transform: translate(2px, -2px);

    color: var(--primary);
}


.hb-process-cta-icon svg {
    width: 16px;

    height: 16px;

    stroke: currentColor;

    stroke-width: 1.8;

    fill: none;
}


/* =========================================================
   PROCESS TRACK
========================================================= */

.hb-process-track {
    position: relative;

    display: grid;

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

    gap: 30px;

    padding-top: 45px;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.hb-process-line {
    position: absolute;

    top: 82px;

    left: 9%;

    right: 9%;

    height: 1px;

    background: var(--border);

    z-index: 0;
}


.hb-process-line::before,
.hb-process-line::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--border-strong);

    transform: translateY(-50%);
}


.hb-process-line::before {
    left: 0;
}


.hb-process-line::after {
    right: 0;
}


.hb-process-line-progress {
    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 100%;

    background:
        linear-gradient(90deg,
            #2563EB,
            #7C3AED);
}


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

.hb-process-step {
    position: relative;

    z-index: 2;

    min-width: 0;
}


.hb-process-icon-wrap {
    width: 74px;

    height: 74px;

    margin-bottom: 30px;

    display: grid;

    place-items: center;

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

    border-radius: 20px;

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

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

    transition:
        transform .45s cubic-bezier(.2, .75, .25, 1),
        border-color .35s ease,
        box-shadow .45s ease;
}


.hb-process-icon {
    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background: #EEF4FF;

    color: var(--primary);

    transition:
        background .35s ease,
        color .35s ease,
        transform .45s ease;
}


.hb-process-icon svg {
    width: 23px;

    height: 23px;

    stroke: currentColor;

    stroke-width: 1.8;

    fill: none;
}


.hb-process-step:hover .hb-process-icon-wrap {
    transform: translateY(-6px);

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

    box-shadow:
        0 20px 45px rgba(37, 99, 235, .13);
}


.hb-process-step:hover .hb-process-icon {
    transform: scale(1.08) rotate(-4deg);

    background: var(--primary);

    color: #fff;
}


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

.hb-process-step-number {
    margin-bottom: 9px;

    font-family: "JetBrains Mono", monospace;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .12em;

    color: var(--primary);
}


.hb-process-step h3 {
    margin: 0 0 13px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(25px, 2.1vw, 34px);

    font-weight: 650;

    line-height: 1.05;

    letter-spacing: -.045em;

    color: var(--dark);

    transition: color .3s ease;
}


.hb-process-step:hover h3 {
    color: var(--primary);
}


.hb-process-step>p {
    max-width: 290px;

    min-height: 82px;

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

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


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

.hb-process-features {
    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin: 25px 0 0;

    padding: 18px;

    border: 1px solid rgba(226, 232, 240, .8);

    border-radius: 15px;

    background:
        linear-gradient(135deg,
            rgba(248, 250, 252, .95),
            rgba(239, 246, 255, .55));
}


.hb-process-features li {
    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 11px;

    font-weight: 600;

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


.hb-process-features svg {
    width: 15px;

    height: 15px;

    flex-shrink: 0;

    color: var(--primary);

    stroke-width: 1.8;
}


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

.hb-process-footer {
    display: grid;

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

    gap: 20px;

    margin-top: 75px;

    padding-top: 28px;

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


.hb-process-footer-item {
    display: flex;

    align-items: center;

    gap: 13px;
}


.hb-process-footer-icon {
    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: #EEF4FF;

    color: var(--primary);
}


.hb-process-footer-icon svg {
    width: 18px;

    height: 18px;

    stroke-width: 1.8;
}


.hb-process-footer-item div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.hb-process-footer-item strong {
    font-size: 12px;

    font-weight: 700;

    color: var(--dark);
}


.hb-process-footer-item span {
    font-size: 10px;

    line-height: 1.45;

    color: var(--text-muted);
}


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

@media (max-width: 1050px) {

    .hb-process {
        padding: 120px 0 100px;
    }

    .hb-process-container {
        width: min(100% - 48px, 900px);
    }

    .hb-process-heading-row {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .hb-process-intro {
        display: flex;

        align-items: end;

        justify-content: space-between;

        gap: 30px;
    }

    .hb-process-intro p {
        margin-bottom: 0;
    }

    .hb-process-track {
        gap: 18px;
    }

    .hb-process-step>p {
        min-height: 105px;
    }

    .hb-process-footer {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 700px) {

    .hb-process {
        padding: 90px 0 80px;
    }

    .hb-process-container {
        width: calc(100% - 32px);
    }

    .hb-process-header {
        margin-bottom: 55px;
    }

    .hb-process-title {
        font-size: clamp(43px, 12vw, 60px);
    }

    .hb-process-intro {
        display: block;
    }

    .hb-process-intro p {
        margin-bottom: 22px;

        font-size: 14px;
    }


    /* Mobile vertical line */

    .hb-process-track {
        display: flex;

        flex-direction: column;

        gap: 45px;

        padding-left: 18px;

        padding-top: 0;
    }


    .hb-process-line {
        top: 0;

        bottom: 0;

        left: 52px;

        right: auto;

        width: 1px;

        height: auto;
    }


    .hb-process-line::before {
        top: 0;

        left: 50%;

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


    .hb-process-line::after {
        top: auto;

        bottom: 0;

        right: auto;

        left: 50%;

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


    .hb-process-line-progress {
        width: 100%;

        height: 0;

        background:
            linear-gradient(180deg,
                #2563EB,
                #7C3AED);
    }


    .hb-process-step {
        display: grid;

        grid-template-columns: 70px 1fr;

        column-gap: 22px;
    }


    .hb-process-icon-wrap {
        grid-row: 1 / span 4;

        width: 68px;

        height: 68px;

        margin: 0;

        border-radius: 18px;
    }


    .hb-process-icon {
        width: 44px;

        height: 44px;
    }


    .hb-process-step-number {
        margin: 2px 0 6px;
    }


    .hb-process-step h3 {
        font-size: 29px;

        margin-bottom: 10px;
    }


    .hb-process-step>p {
        min-height: auto;

        margin-bottom: 0;
    }


    .hb-process-features {
        grid-column: 2;

        margin-top: 18px;

        padding: 14px;
    }


    .hb-process-footer {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 60px;
    }

}


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

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

    .hb-process-step,
    .hb-process-icon-wrap,
    .hb-process-icon,
    .hb-process-cta,
    .hb-process-cta-icon {
        transition: none !important;
    }

}

/* =========================================================
   HUBITBRIDGE — TECHNOLOGY SECTION
   ========================================================= */

.technology-section {
    position: relative;
    width: 100%;
    padding: 140px 0 125px;
    background: var(--bg, #f8fafc);
    color: var(--text, #172033);
    overflow: hidden;
}

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

.technology-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


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

.technology-header {
    margin-bottom: 72px;
}

.technology-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;

    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
}

.technology-eyebrow>span:first-child {
    color: var(--primary, #2563eb);
    font-weight: 700;
}

.technology-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--border-strong, #cbd5e1);
    order: 1;
}

.technology-eyebrow>span:last-child {
    order: 2;
}

.technology-eyebrow>span:first-child {
    order: 0;
}

.technology-heading-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 70px;
    align-items: end;
}

.technology-heading {
    margin: 0;
    max-width: 850px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -0.055em;
    color: var(--dark, #1e293b);
}

.technology-title-line {
    display: block;
    overflow: hidden;
}

.technology-title-word {
    display: inline-block;
    margin-right: 0.18em;
}

.technology-title-accent {
    color: var(--primary, #2563eb);
}

.technology-intro {
    padding-bottom: 7px;
}

.technology-intro p {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;
    color: var(--text-secondary, #64748b);
}


/* =========================================================
   INTERFACE
   ========================================================= */

.technology-interface {
    position: relative;
    width: 100%;
}


/* =========================================================
   TABS
   ========================================================= */

.technology-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;

    border: 1px solid var(--border, #e2e8f0);
    border-bottom: none;

    background: #ffffff;
    border-radius: 20px 20px 0 0;

    overflow: hidden;
}

.technology-tab {
    position: relative;

    display: flex;
    align-items: center;
    gap: 15px;

    min-width: 0;
    min-height: 102px;
    padding: 20px 22px;

    border: 0;
    border-right: 1px solid var(--border, #e2e8f0);

    background: #ffffff;
    color: var(--text-secondary, #64748b);

    text-align: left;
    cursor: pointer;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}

.technology-tab:last-child {
    border-right: none;
}

.technology-tab::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: linear-gradient(90deg,
            var(--primary, #2563eb),
            var(--secondary, #7c3aed));

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.technology-tab:hover {
    background: #f8fbff;
    color: var(--dark, #1e293b);
}

.technology-tab.active {
    background: #f5f9ff;
    color: var(--dark, #1e293b);
}

.technology-tab.active::after {
    transform: scaleX(1);
}

.technology-tab-number {
    align-self: flex-start;
    padding-top: 2px;

    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;

    color: var(--text-muted, #94a3b8);

    transition: color 0.3s ease;
}

.technology-tab.active .technology-tab-number {
    color: var(--primary, #2563eb);
}

.technology-tab-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

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

    border: 1px solid var(--border, #e2e8f0);
    border-radius: 11px;

    background: #ffffff;

    color: var(--text-secondary, #64748b);

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

.technology-tab-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.technology-tab:hover .technology-tab-icon {
    transform: translateY(-2px);
    border-color: #bfdbfe;
    color: var(--primary, #2563eb);
}

.technology-tab.active .technology-tab-icon {
    border-color: rgba(37, 99, 235, 0.18);
    background: #ffffff;
    color: var(--primary, #2563eb);
}

.technology-tab-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.technology-tab-content strong {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;

    color: inherit;
}

.technology-tab-content small {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    line-height: 1.4;

    color: var(--text-muted, #94a3b8);
}


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

.technology-content {
    position: relative;

    width: 100%;
    min-height: 570px;

    border: 1px solid var(--border, #e2e8f0);
    border-top: none;

    border-radius: 0 0 24px 24px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.06),
        0 5px 20px rgba(15, 23, 42, 0.03);
}


/* =========================================================
   PANELS
   ========================================================= */

.technology-panel {
    position: absolute;
    inset: 0;

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

    align-items: center;

    padding: 70px 72px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(35px);
}

.technology-panel.active {
    position: relative;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);
}

.technology-panel-copy {
    position: relative;
    z-index: 2;

    max-width: 610px;
    padding-right: 30px;
}

.technology-panel-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 28px;

    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;

    color: var(--text-secondary, #64748b);
}

.technology-panel-label>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

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

    font-size: 9px;
}

.technology-panel h3 {
    margin: 0 0 23px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 4vw, 55px);
    line-height: 1.03;
    font-weight: 700;
    letter-spacing: -0.045em;

    color: var(--dark, #1e293b);
}

.technology-panel p {
    max-width: 550px;

    margin: 0 0 32px;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--text-secondary, #64748b);
}


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

.technology-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 34px;
}

.tech-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 42px;
    padding: 6px 13px 6px 7px;

    border: 1px solid var(--border, #e2e8f0);
    border-radius: 9px;

    background: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 600;

    color: var(--dark, #1e293b);

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

.tech-item:hover {
    transform: translateY(-3px);

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

    background: #f8fbff;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.08);
}

.tech-logo {
    width: 29px;
    height: 29px;

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

    border-radius: 7px;

    background: #f8fafc;

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

.tech-logo img {
    display: block;

    width: 18px;
    height: 18px;

    object-fit: contain;
}

.tech-logo svg {
    width: 17px;
    height: 17px;

    stroke-width: 1.8;
}


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

.technology-panel-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    width: fit-content;

    padding: 13px 18px;

    border: 1px solid var(--border-strong, #cbd5e1);
    border-radius: 10px;

    background: var(--dark, #1e293b);

    color: #fff;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;

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

.technology-panel-button svg {
    width: 16px;
    height: 16px;

    transition: transform 0.3s ease;
}

.technology-panel-button:hover {
    transform: translateY(-2px);

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

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

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(37, 99, 235, 0.18);
}

.technology-panel-button:hover svg {
    transform: translateX(4px);
}


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

.technology-panel-visual {
    position: relative;

    min-height: 430px;

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

    isolation: isolate;
}

.technology-panel-visual::before {
    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(37, 99, 235, 0.12) 0%,
            rgba(124, 58, 237, 0.07) 35%,
            rgba(255, 255, 255, 0) 72%);

    z-index: -1;
}

.technology-panel-visual::after {
    content: "";

    position: absolute;

    width: 72%;
    height: 72%;

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

    border-radius: 50%;

    transform: rotate(-15deg);

    z-index: -1;
}

.technology-visual-image {
    display: block;

    width: min(100%, 540px);
    max-height: 470px;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 35px rgba(15, 23, 42, 0.08));

    transform: translate3d(0, 0, 0);

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

.technology-panel-visual:hover .technology-visual-image {
    transform: translate3d(0, -8px, 0) scale(1.015);

    filter:
        drop-shadow(0 30px 45px rgba(37, 99, 235, 0.12));
}


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

.technology-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;

    padding-top: 48px;
}

.technology-bottom-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    margin-top: 15px;
    background: var(--border, #e2e8f0);
}

.technology-bottom-copy {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 7px;

    padding-top: 34px;
}

.technology-bottom-copy span {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;

    color: var(--text-muted, #94a3b8);
}

.technology-bottom-copy strong {
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--dark, #1e293b);
}

.technology-bottom-tags {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;

    padding-top: 34px;
}

.technology-bottom-tags span {
    padding: 8px 12px;

    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;

    background: #ffffff;

    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.08em;

    color: var(--text-secondary, #64748b);
}


/* =========================================================
   RESPONSIVE — LARGE TABLET
   ========================================================= */

@media (max-width: 1200px) {

    .technology-container {
        width: min(1100px, calc(100% - 48px));
    }

    .technology-heading-wrap {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 45px;
    }

    .technology-tab {
        padding: 18px 15px;
        gap: 11px;
    }

    .technology-tab-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .technology-tab-content strong {
        font-size: 12px;
    }

    .technology-tab-content small {
        font-size: 9px;
    }

    .technology-panel {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
        padding: 60px 50px;
    }

    .technology-panel h3 {
        font-size: 43px;
    }

    .technology-panel-visual {
        min-height: 380px;
    }
}


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

@media (max-width: 900px) {

    .technology-section {
        padding: 110px 0 95px;
    }

    .technology-container {
        width: min(760px, calc(100% - 40px));
    }

    .technology-header {
        margin-bottom: 50px;
    }

    .technology-heading-wrap {
        display: block;
    }

    .technology-heading {
        max-width: 700px;
    }

    .technology-intro {
        max-width: 600px;
        margin-top: 25px;
        padding-bottom: 0;
    }

    .technology-tabs {
        grid-template-columns: repeat(5, minmax(150px, 1fr));

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
    }

    .technology-tabs::-webkit-scrollbar {
        display: none;
    }

    .technology-tab {
        min-width: 150px;
    }

    .technology-content {
        min-height: 0;
    }

    .technology-panel {
        position: relative;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        padding: 55px 45px;

        gap: 45px;

        transform: none;
    }

    .technology-panel:not(.active) {
        display: none;
    }

    .technology-panel-copy {
        max-width: none;
        padding-right: 0;
    }

    .technology-panel h3 {
        max-width: 650px;
    }

    .technology-panel p {
        max-width: 620px;
    }

    .technology-panel-visual {
        min-height: 340px;
    }

    .technology-visual-image {
        max-height: 350px;
    }

    .technology-bottom {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .technology-bottom-tags {
        justify-content: flex-start;
    }
}


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

@media (max-width: 640px) {

    .technology-section {
        padding: 85px 0 75px;
    }

    .technology-container {
        width: calc(100% - 32px);
    }

    .technology-eyebrow {
        gap: 10px;
        margin-bottom: 22px;

        font-size: 9px;
    }

    .technology-eyebrow::before {
        width: 22px;
    }

    .technology-heading {
        font-size: clamp(39px, 12vw, 58px);
        line-height: 1;
        letter-spacing: -0.06em;
    }

    .technology-title-word {
        margin-right: 0.12em;
    }

    .technology-intro {
        margin-top: 20px;
    }

    .technology-intro p {
        font-size: 13px;
        line-height: 1.75;
    }

    .technology-tabs {
        margin-right: -16px;
        width: calc(100% + 16px);

        border-radius: 15px 0 0 0;
    }

    .technology-tab {
        min-width: 170px;
        min-height: 86px;

        padding: 15px;

        gap: 10px;
    }

    .technology-tab-number {
        font-size: 8px;
    }

    .technology-tab-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .technology-tab-icon svg {
        width: 16px;
        height: 16px;
    }

    .technology-tab-content strong {
        font-size: 11px;
    }

    .technology-tab-content small {
        font-size: 8px;
    }

    .technology-content {
        border-radius: 0 0 18px 18px;
    }

    .technology-panel {
        padding: 38px 24px 42px;

        gap: 35px;
    }

    .technology-panel-label {
        gap: 9px;

        margin-bottom: 20px;

        font-size: 8px;
        letter-spacing: 0.09em;
    }

    .technology-panel-label>span {
        width: 25px;
        height: 25px;

        font-size: 8px;
    }

    .technology-panel h3 {
        margin-bottom: 17px;

        font-size: 34px;
        line-height: 1.05;
        letter-spacing: -0.045em;
    }

    .technology-panel p {
        margin-bottom: 24px;

        font-size: 13px;
        line-height: 1.75;
    }

    .technology-stack {
        gap: 7px;

        margin-bottom: 27px;
    }

    .tech-item {
        min-height: 38px;
        padding: 5px 10px 5px 6px;

        font-size: 10px;
    }

    .tech-logo {
        width: 27px;
        height: 27px;
    }

    .tech-logo img {
        width: 16px;
        height: 16px;
    }

    .tech-logo svg {
        width: 15px;
        height: 15px;
    }

    .technology-panel-button {
        padding: 11px 14px;

        font-size: 10px;
    }

    .technology-panel-button svg {
        width: 14px;
        height: 14px;
    }

    .technology-panel-visual {
        min-height: 260px;
    }

    .technology-panel-visual::before {
        width: 330px;
        height: 330px;
    }

    .technology-panel-visual::after {
        width: 80%;
        height: 80%;
    }

    .technology-visual-image {
        width: 100%;
        max-height: 280px;
    }

    .technology-bottom {
        padding-top: 35px;
    }

    .technology-bottom-copy {
        padding-top: 28px;
    }

    .technology-bottom-copy strong {
        font-size: 17px;
    }

    .technology-bottom-tags {
        padding-top: 20px;
        gap: 6px;
    }

    .technology-bottom-tags span {
        padding: 7px 9px;
        font-size: 7px;
    }
}


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

@media (max-width: 420px) {

    .technology-section {
        padding-top: 70px;
    }

    .technology-heading {
        font-size: 37px;
    }

    .technology-panel {
        padding-left: 20px;
        padding-right: 20px;
    }

    .technology-panel h3 {
        font-size: 31px;
    }

    .technology-panel-visual {
        min-height: 220px;
    }

    .technology-visual-image {
        max-height: 235px;
    }
}


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

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

    .technology-section *,
    .technology-section *::before,
    .technology-section *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .technology-panel {
        transform: none !important;
    }

    .technology-visual-image {
        transform: none !important;
    }
}

/* =========================================================
   HUBITBRIDGE
   WHY HUBITBRIDGE
   ========================================================= */

.hb-why {
    position: relative;

    width: 100%;

    padding: 10px 0 125px;

    background: var(--bg, #f8fafc);

    color: var(--text, #172033);

    overflow: hidden;
}


/* =========================================================
   GLOBAL SECTION BOX SIZING
   ========================================================= */

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


/* =========================================================
   CONTAINER
   ========================================================= */

.hb-why-container {
    width: min(1380px,
            calc(100% - 80px));

    margin: 0 auto;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hb-why-header {
    margin-bottom: 38px;
}


.hb-why-eyebrow {
    display: flex;

    align-items: center;

    gap: 13px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--text-secondary,
            #64748b);
}


.hb-why-number {
    color:
        var(--primary,
            #2563eb);
}


.hb-why-line {
    width: 32px;

    height: 1px;

    background:
        var(--border-strong,
            #cbd5e1);
}


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

.hb-why-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr) minmax(480px, 1.1fr);

    align-items: center;

    gap: 90px;

    margin-bottom: 82px;
}


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

.hb-why-copy {
    max-width: 650px;
}


.hb-why-title {
    margin: 0 0 28px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(48px,
            5.6vw,
            78px);

    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -0.055em;

    color:
        var(--dark,
            #1e293b);
}


.hb-why-title span {
    display: block;

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


.hb-why-description {
    max-width: 560px;

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 16px;

    line-height: 1.8;

    color:
        var(--text-secondary,
            #64748b);
}


/* =========================================================
   IMAGE AREA
   ========================================================= */

.hb-why-visual {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 460px;

    isolation: isolate;
}



/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.hb-why-image-wrap {
    position: relative;

    width: min(100%,
            620px);

    overflow: hidden;

    border-radius: 26px;

    /* background: #ffffff; */

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

    box-shadow:
        0 25px 70px rgba(15,
            23,
            42,
            0.09);
}


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

.hb-why-image {
    display: block;

    width: 100%;

    height: 430px;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    transition:
        transform 0.8s cubic-bezier(0.22,
            1,
            0.36,
            1);
}


.hb-why-image-wrap:hover .hb-why-image {
    transform:
        scale(1.035);
}


/* =========================================================
   IMAGE SHINE
   ========================================================= */

.hb-why-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, 0.12),
            transparent 35%,
            transparent 70%,
            rgba(37, 99, 235, 0.05));
}


/* =========================================================
   PRINCIPLES
   ========================================================= */

.hb-why-principles {
    display: grid;

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

    border-top:
        1px solid var(--border,
            #e2e8f0);

    border-bottom:
        1px solid var(--border,
            #e2e8f0);
}


/* =========================================================
   PRINCIPLE
   ========================================================= */

.hb-why-principle {
    display: grid;

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

    gap: 18px;

    padding: 34px 28px 36px;

    border-right:
        1px solid var(--border,
            #e2e8f0);

    transition:
        background 0.35s ease;
}


.hb-why-principle:first-child {
    padding-left: 0;
}


.hb-why-principle:last-child {
    padding-right: 0;

    border-right: none;
}


.hb-why-principle:hover {
    background:
        rgba(255,
            255,
            255,
            0.65);
}


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

.hb-why-principle-icon {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        #eff6ff;

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

    transition:
        transform 0.35s ease;
}


.hb-why-principle:nth-child(2) .hb-why-principle-icon {
    background: #f3efff;

    color:
        var(--secondary,
            #7c3aed);
}


.hb-why-principle:nth-child(3) .hb-why-principle-icon {
    background: #ecfdf5;

    color:
        var(--accent,
            #22c55e);
}


.hb-why-principle:nth-child(4) .hb-why-principle-icon {
    background: #fff7ed;

    color: #f97316;
}


.hb-why-principle:hover .hb-why-principle-icon {
    transform:
        translateY(-5px) rotate(-3deg);
}


.hb-why-principle-icon svg {
    width: 21px;

    height: 21px;

    stroke-width: 1.8;
}


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

.hb-why-principle-number {
    display: block;

    margin-bottom: 6px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.1em;

    color:
        var(--text-muted,
            #94a3b8);
}


.hb-why-principle h3 {
    margin: 0 0 9px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 700;

    color:
        var(--dark,
            #1e293b);
}


.hb-why-principle p {
    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 11px;

    line-height: 1.7;

    color:
        var(--text-secondary,
            #64748b);
}


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

.hb-why-bottom {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 50px;

    margin-top: 58px;

    padding: 42px 48px;

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

    border-radius: 24px;

    background:
        linear-gradient(105deg,
            #eff6ff 0%,
            #f5f3ff 100%);

    overflow: hidden;
}


/* Decorative glow */

.hb-why-bottom::before {
    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    right: 15%;

    top: -240px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(124,
                58,
                237,
                0.12),
            transparent 70%);

    pointer-events: none;
}


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

.hb-why-bottom-copy {
    position: relative;

    z-index: 1;
}


.hb-why-bottom-label {
    display: block;

    margin-bottom: 10px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.14em;

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


.hb-why-bottom h3 {
    max-width: 850px;

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(24px,
            3vw,
            38px);

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.035em;

    color:
        var(--dark,
            #1e293b);
}


.hb-why-bottom h3 span {
    display: block;

    background:
        linear-gradient(90deg,
            var(--primary,
                #2563eb),
            var(--secondary,
                #7c3aed));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


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

.hb-why-bottom-cta {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 220px;

    padding-left: 30px;

    border-left:
        1px solid rgba(37,
            99,
            235,
            0.15);

    text-decoration: none;

    color:
        var(--dark,
            #1e293b);
}


.hb-why-bottom-cta-icon {
    width: 52px;

    height: 52px;

    flex: 0 0 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color: #ffffff;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


.hb-why-bottom-cta-icon svg {
    width: 19px;

    height: 19px;
}


.hb-why-bottom-cta-copy {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.hb-why-bottom-cta-copy small {
    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.1em;

    color:
        var(--text-secondary,
            #64748b);
}


.hb-why-bottom-cta-copy strong {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 13px;

    color:
        var(--dark,
            #1e293b);
}


.hb-why-bottom-cta:hover .hb-why-bottom-cta-icon {
    transform:
        translate(3px,
            -3px) rotate(3deg);

    background:
        var(--secondary,
            #7c3aed);
}


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

@media (max-width: 1100px) {

    .hb-why-container {
        width:
            min(1000px,
                calc(100% - 50px));
    }


    .hb-why-intro {
        grid-template-columns:
            1fr 1fr;

        gap: 50px;
    }


    .hb-why-title {
        font-size:
            clamp(45px,
                5.5vw,
                66px);
    }


    .hb-why-image {
        height: 380px;
    }


    .hb-why-principle {
        grid-template-columns:
            43px 1fr;

        gap: 13px;

        padding-left: 18px;

        padding-right: 18px;
    }


    .hb-why-principle-icon {
        width: 43px;

        height: 43px;
    }


    .hb-why-principle h3 {
        font-size: 14px;
    }


    .hb-why-principle p {
        font-size: 10px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 850px) {

    .hb-why {
        padding:
            105px 0 90px;
    }


    .hb-why-container {
        width:
            calc(100% - 40px);
    }


    .hb-why-intro {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 50px;

        margin-bottom: 60px;
    }


    .hb-why-copy {
        max-width: 720px;
    }


    .hb-why-visual {
        min-height: auto;
    }


    .hb-why-image-wrap {
        width: min(100%,
                700px);

        margin: 0 auto;
    }


    .hb-why-image {
        height: auto;

        aspect-ratio: 16 / 10;
    }


    .hb-why-principles {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .hb-why-principle {
        padding:
            30px 22px;

        border-bottom:
            1px solid var(--border,
                #e2e8f0);
    }


    .hb-why-principle:nth-child(2) {
        border-right: none;
    }


    .hb-why-principle:nth-child(3),
    .hb-why-principle:nth-child(4) {
        border-bottom: none;
    }


    .hb-why-principle:first-child {
        padding-left: 22px;
    }


    .hb-why-principle:last-child {
        padding-right: 22px;
    }


    .hb-why-bottom {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 35px;
    }


    .hb-why-bottom-cta {
        width: fit-content;

        padding-left: 0;

        border-left: none;
    }

}


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

@media (max-width: 600px) {

    .hb-why {
        padding:
            80px 0 70px;
    }


    .hb-why-container {
        width:
            calc(100% - 32px);
    }


    .hb-why-header {
        margin-bottom: 25px;
    }


    .hb-why-eyebrow {
        font-size: 9px;
    }


    .hb-why-line {
        width: 22px;
    }


    .hb-why-intro {
        gap: 38px;

        margin-bottom: 45px;
    }


    .hb-why-title {
        margin-bottom: 20px;

        font-size:
            clamp(40px,
                12vw,
                55px);

        line-height: 1;

        letter-spacing: -0.06em;
    }


    .hb-why-description {
        font-size: 13px;

        line-height: 1.75;
    }


    .hb-why-image-wrap {
        border-radius: 20px;
    }


    .hb-why-image {
        height: 300px;

        aspect-ratio: auto;

        object-fit: cover;
    }


    .hb-why-principles {
        grid-template-columns: 1fr;
    }


    .hb-why-principle,
    .hb-why-principle:first-child,
    .hb-why-principle:last-child {
        grid-template-columns:
            48px minmax(0, 1fr);

        padding:
            25px 0;

        border-right: none;

        border-bottom:
            1px solid var(--border,
                #e2e8f0);
    }


    .hb-why-principle:last-child {
        border-bottom: none;
    }


    .hb-why-principle h3 {
        font-size: 15px;
    }


    .hb-why-principle p {
        max-width: 390px;

        font-size: 11px;
    }


    .hb-why-bottom {
        margin-top: 42px;

        padding:
            27px 22px;

        border-radius: 18px;
    }


    .hb-why-bottom-label {
        font-size: 8px;
    }


    .hb-why-bottom h3 {
        font-size: 24px;
    }


    .hb-why-bottom-cta-icon {
        width: 45px;

        height: 45px;

        flex-basis: 45px;
    }


    .hb-why-bottom-cta-copy strong {
        font-size: 12px;
    }

}


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

@media (max-width: 420px) {

    .hb-why-image {
        height: 260px;
    }


    .hb-why-title {
        font-size: 38px;
    }


    .hb-why-bottom h3 {
        font-size: 22px;
    }

}


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

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

    .hb-why *,
    .hb-why *::before,
    .hb-why *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}