:root {
    --fx-blue: #1684ff;
    --fx-cyan: #25d7ff;
    --fx-navy: #06152c;
    --fx-ink: #0b1f3a;
    --fx-muted: #61738d;
    --fx-soft: #f5f9ff;
    --fx-line: #dce8f7;
    --fx-white: #fff
}

.fx-home-page {
    overflow: hidden;
    background: #fff;
    color: var(--fx-ink)
}

.fx-home-hero {
    position: relative;
    overflow: hidden;
    padding: 158px 0 105px;
    background: radial-gradient(circle at 82% 16%,rgba(37,215,255,.17),transparent 27%),radial-gradient(circle at 12% 78%,rgba(22,132,255,.11),transparent 28%),linear-gradient(135deg,#fff 0%,#f3f8ff 52%,#eef8ff 100%)
}

.fx-hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(22,132,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(22,132,255,.04) 1px,transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom,#000,transparent 92%)
}

.fx-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none
}

.fx-hero-glow-one {
    width: 360px;
    height: 360px;
    background: rgba(37,215,255,.18);
    right: 3%;
    top: 12%
}

.fx-hero-glow-two {
    width: 260px;
    height: 260px;
    background: rgba(22,132,255,.12);
    left: -5%;
    bottom: 4%
}

.fx-hero-kicker, .fx-section-heading > span, .fx-product-copy > span, .fx-cta-card > div > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fx-blue);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase
}

    .fx-hero-kicker span {
        width: 34px;
        height: 2px;
        background: linear-gradient(90deg,var(--fx-blue),var(--fx-cyan))
    }

.fx-home-hero h1 {
    max-width: 720px;
    margin: 22px 0 24px;
    font-size: clamp(3rem,5.5vw,5.6rem);
    font-weight: 850;
    line-height: .98;
    letter-spacing: -.055em
}

    .fx-home-hero h1 span {
        display: block;
        background: linear-gradient(100deg,#1269e8,#19b8f3 58%,#5f6dff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

.fx-hero-copy {
    max-width: 650px;
    color: var(--fx-muted);
    font-size: 1.12rem;
    line-height: 1.8
}

.fx-modern-slogan {
    margin: 24px 0 0;
    padding-left: 18px;
    border-left: 3px solid var(--fx-blue);
    color: var(--fx-ink);
    font-size: 1rem
}

    .fx-modern-slogan strong {
        color: var(--fx-blue)
    }

.fx-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 34px
}

.fx-btn-primary, .fx-btn-secondary, .fx-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    font-weight: 800;
    transition: .25s ease
}

.fx-btn-primary {
    border: 0;
    background: linear-gradient(135deg,#176ef0,#16bfe9);
    color: #fff;
    box-shadow: 0 16px 38px rgba(22,132,255,.26)
}

    .fx-btn-primary:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 22px 46px rgba(22,132,255,.34)
    }

.fx-btn-secondary {
    border: 1px solid rgba(9,31,60,.14);
    background: rgba(255,255,255,.72);
    color: var(--fx-ink);
    backdrop-filter: blur(12px)
}

    .fx-btn-secondary:hover {
        border-color: rgba(22,132,255,.34);
        color: var(--fx-blue);
        transform: translateY(-3px)
    }

.fx-hero-proof {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 34px
}

    .fx-hero-proof div {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #405470;
        font-size: .9rem;
        font-weight: 700
    }

    .fx-hero-proof i {
        color: var(--fx-blue)
    }

.fx-hero-visual {
    position: relative;
    perspective: 1200px;
    min-height: 570px
}

.fx-visual-halo {
    position: absolute;
    inset: 12% 2% 6% 12%;
    border-radius: 45px;
    background: linear-gradient(135deg,rgba(22,132,255,.25),rgba(37,215,255,.12));
    filter: blur(42px)
}

.fx-visual-window {
    position: relative;
    margin: 35px 10px 0 35px;
    border: 1px solid rgba(42,151,255,.22);
    border-radius: 28px;
    background: linear-gradient(160deg,#06162f,#071f41);
    box-shadow: 0 42px 100px rgba(4,21,47,.31);
    overflow: hidden;
    transform: rotateY(-5deg) rotateX(2deg)
}

.fx-visual-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #cfe4ff;
    font-size: .76rem
}

.fx-window-dots {
    display: flex;
    gap: 6px
}

    .fx-window-dots i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2a72d9
    }

        .fx-window-dots i:nth-child(2) {
            background: #26bde6
        }

        .fx-window-dots i:nth-child(3) {
            background: #6574ff
        }

.fx-visual-topbar > i {
    color: #4be3ff
}

.fx-visual-body {
    padding: 18px
}

.fx-brand-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 164px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: radial-gradient(circle at center,rgba(19,110,230,.13),transparent 58%),#020a1c;
    overflow: hidden
}

    .fx-brand-panel img {
        max-width: 88%;
        max-height: 145px;
        object-fit: contain
    }

.fx-metric-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 12px
}

    .fx-metric-grid article {
        padding: 14px;
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 14px;
        background: rgba(255,255,255,.035)
    }

        .fx-metric-grid article > span {
            display: flex;
            width: 30px;
            height: 30px;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: rgba(37,215,255,.11);
            color: #44ddff
        }

    .fx-metric-grid small, .fx-metric-grid em {
        display: block;
        color: #8fa7c6;
        font-size: .67rem;
        font-style: normal
    }

    .fx-metric-grid strong {
        display: block;
        margin: 8px 0 2px;
        color: #fff;
        font-size: 1.35rem
    }

    .fx-metric-grid em {
        color: #5de2b0
    }

.fx-visual-chart {
    margin-top: 12px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.025)
}

.fx-chart-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff
}

    .fx-chart-heading small {
        display: block;
        color: #7892b5;
        font-size: .66rem;
        text-transform: uppercase;
        letter-spacing: .1em
    }

    .fx-chart-heading strong {
        font-size: .88rem
    }

    .fx-chart-heading > span {
        color: #86a1c4;
        font-size: .68rem
    }

.fx-visual-chart svg {
    width: 100%;
    height: 145px;
    margin-top: 4px
}

.fx-chart-lines line {
    stroke: rgba(255,255,255,.07)
}

.fx-chart-area {
    fill: url(#homeAreaGradient)
}

.fx-chart-stroke {
    fill: none;
    stroke: #35d7ff;
    stroke-width: 3;
    stroke-linecap: round
}

.fx-visual-chart circle {
    fill: #fff;
    stroke: #35d7ff;
    stroke-width: 4
}

.fx-float-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(22,132,255,.15);
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 50px rgba(6,21,44,.15);
    backdrop-filter: blur(14px)
}

    .fx-float-card > i {
        display: flex;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: linear-gradient(135deg,#1b78f4,#2bd8ff);
        color: #fff
    }

    .fx-float-card small, .fx-float-card strong {
        display: block
    }

    .fx-float-card small {
        color: #7a8ba1;
        font-size: .65rem
    }

    .fx-float-card strong {
        color: #0b2342;
        font-size: .78rem
    }

.fx-float-cloud {
    top: 12px;
    right: -12px
}

.fx-float-ai {
    left: 0;
    bottom: 18px
}

.fx-tech-strip {
    border-top: 1px solid #e5eef9;
    border-bottom: 1px solid #e5eef9;
    background: #fff
}

    .fx-tech-strip .container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        flex-wrap: wrap;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #536a87;
        font-size: .82rem;
        font-weight: 750
    }

    .fx-tech-strip i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #36bce9
    }

.fx-home-section {
    padding: 105px 0
}

.fx-capabilities {
    background: #fff
}

.fx-section-heading {
    max-width: 760px;
    margin-bottom: 52px
}

    .fx-section-heading.fx-centered {
        text-align: center;
        margin-left: auto;
        margin-right: auto
    }

    .fx-section-heading h2, .fx-product-copy h2, .fx-cta-card h2 {
        margin: 14px 0 16px;
        color: var(--fx-ink);
        font-size: clamp(2.2rem,4vw,3.7rem);
        font-weight: 850;
        line-height: 1.06;
        letter-spacing: -.045em
    }

    .fx-section-heading p, .fx-product-copy p, .fx-cta-card p {
        color: var(--fx-muted);
        font-size: 1.04rem;
        line-height: 1.8
    }

.fx-capability-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px
}

.fx-capability-card {
    position: relative;
    overflow: hidden;
    min-height: 325px;
    padding: 32px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    background: linear-gradient(145deg,#fff,#f8fbff);
    box-shadow: 0 18px 50px rgba(10,39,78,.07);
    transition: .3s ease
}

    .fx-capability-card:hover {
        transform: translateY(-7px);
        border-color: rgba(22,132,255,.3);
        box-shadow: 0 28px 70px rgba(22,132,255,.14)
    }

    .fx-capability-card > span {
        color: var(--fx-blue);
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: .13em;
        text-transform: uppercase
    }

    .fx-capability-card h3 {
        margin: 12px 0;
        color: var(--fx-ink);
        font-size: 1.55rem;
        font-weight: 820
    }

    .fx-capability-card p {
        max-width: 560px;
        color: var(--fx-muted);
        line-height: 1.75
    }

    .fx-capability-card > a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        color: var(--fx-blue);
        font-weight: 800;
        text-decoration: none
    }

.fx-capability-icon {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: linear-gradient(135deg,rgba(22,132,255,.12),rgba(37,215,255,.14));
    color: var(--fx-blue);
    font-size: 1.35rem
}

.fx-capability-large {
    grid-row: span 2;
    min-height: 668px;
    background: radial-gradient(circle at 80% 15%,rgba(37,215,255,.16),transparent 24%),linear-gradient(145deg,#f9fcff,#edf7ff)
}

.fx-capability-wide {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    grid-column: span 2;
    min-height: 295px
}

.fx-cloud-visual {
    position: absolute;
    right: 32px;
    bottom: 32px;
    left: 32px;
    display: grid;
    grid-template-columns: 1.4fr repeat(3,1fr);
    gap: 10px
}

    .fx-cloud-visual > * {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 76px;
        border: 1px solid rgba(22,132,255,.13);
        border-radius: 16px;
        background: rgba(255,255,255,.75);
        color: #3b587a;
        font-size: .8rem;
        font-weight: 750
    }

    .fx-cloud-visual b {
        background: linear-gradient(135deg,#126fe8,#22bde8);
        color: #fff;
        font-size: 1rem
    }

.fx-consulting-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap
}

    .fx-consulting-flow span {
        padding: 11px 14px;
        border: 1px solid #d8e8f8;
        border-radius: 999px;
        background: #fff;
        color: #31506f;
        font-size: .76rem;
        font-weight: 800
    }

    .fx-consulting-flow i {
        width: 25px;
        height: 1px;
        background: linear-gradient(90deg,var(--fx-blue),var(--fx-cyan))
    }

.fx-product-highlight {
    background: linear-gradient(180deg,#f6faff,#eef6ff)
}

.fx-product-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 64px;
    border-radius: 34px;
    background: radial-gradient(circle at 85% 10%,rgba(37,215,255,.18),transparent 25%),linear-gradient(135deg,#06152c,#0b2850);
    box-shadow: 0 38px 90px rgba(6,21,44,.22)
}

.fx-product-copy h2, .fx-product-copy p {
    color: #fff
}

.fx-product-copy p {
    color: #c0d2e9
}

.fx-product-points {
    display: grid;
    gap: 10px;
    margin: 24px 0
}

    .fx-product-points span {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #dceaff
    }

    .fx-product-points i {
        color: #42e0bd
    }

.fx-product-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap
}

.fx-btn-light {
    background: #fff;
    color: #0b274b;
    border: 0
}

.fx-product-actions > a:not(.btn) {
    color: #7fdfff;
    font-weight: 800;
    text-decoration: none
}

.fx-product-preview {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(18px)
}

.fx-product-preview-top {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-weight: 800
}

    .fx-product-preview-top i {
        color: #4ce0ff
    }

.fx-product-preview-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 18px 0
}

    .fx-product-preview-grid article {
        padding: 14px;
        border-radius: 14px;
        background: rgba(0,0,0,.18)
    }

    .fx-product-preview-grid small, .fx-product-preview-grid em {
        display: block;
        color: #89a7c9;
        font-size: .65rem;
        font-style: normal
    }

    .fx-product-preview-grid strong {
        display: block;
        margin: 7px 0;
        color: #fff;
        font-size: 1.35rem
    }

.fx-product-bars {
    display: grid;
    gap: 13px
}

    .fx-product-bars span {
        display: grid;
        grid-template-columns: 92px 1fr 38px;
        gap: 8px;
        align-items: center;
        color: #c9ddf5;
        font-size: .7rem
    }

    .fx-product-bars i {
        position: relative;
        height: 7px;
        border-radius: 999px;
        background: rgba(255,255,255,.1)
    }

        .fx-product-bars i::after {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: var(--w);
            border-radius: inherit;
            background: linear-gradient(90deg,#1684ff,#25d7ff)
        }

    .fx-product-bars em {
        font-style: normal;
        color: #fff
    }

.fx-delivery-section {
    background: #fff
}

.fx-delivery-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

    .fx-delivery-grid article {
        position: relative;
        padding: 28px;
        border: 1px solid var(--fx-line);
        border-radius: 22px;
        background: #fff
    }

    .fx-delivery-grid b {
        position: absolute;
        right: 20px;
        top: 18px;
        color: #d6e6f7;
        font-size: 1.7rem
    }

    .fx-delivery-grid i {
        display: flex;
        width: 46px;
        height: 46px;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: #eef6ff;
        color: var(--fx-blue);
        font-size: 1.2rem
    }

    .fx-delivery-grid h3 {
        margin: 20px 0 10px;
        font-size: 1.2rem;
        font-weight: 820
    }

    .fx-delivery-grid p {
        color: var(--fx-muted);
        line-height: 1.7;
        font-size: .9rem
    }

.fx-home-cta {
    padding-top: 20px;
    background: #fff
}

.fx-cta-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 48px;
    border: 1px solid var(--fx-line);
    border-radius: 30px;
    background: radial-gradient(circle at 85% 20%,rgba(37,215,255,.14),transparent 24%),linear-gradient(135deg,#f9fcff,#eef6ff);
    box-shadow: 0 24px 70px rgba(8,38,78,.1)
}

    .fx-cta-card h2 {
        font-size: clamp(2rem,3vw,3rem)
    }

@media(max-width:1199px) {
    .fx-home-hero {
        padding-top: 135px
    }

    .fx-hero-visual {
        margin-top: 20px
    }

    .fx-product-shell {
        grid-template-columns: 1fr
    }

    .fx-delivery-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:767px) {
    .fx-home-hero {
        padding: 118px 0 72px
    }

        .fx-home-hero h1 {
            font-size: clamp(2.65rem,14vw,4rem)
        }

    .fx-hero-visual {
        min-height: auto
    }

    .fx-visual-window {
        margin: 25px 0 0;
        transform: none
    }

    .fx-float-card {
        display: none
    }

    .fx-metric-grid, .fx-product-preview-grid {
        grid-template-columns: 1fr
    }

    .fx-home-section {
        padding: 76px 0
    }

    .fx-capability-grid {
        grid-template-columns: 1fr
    }

    .fx-capability-large, .fx-capability-wide {
        grid-row: auto;
        grid-column: auto;
        min-height: auto
    }

    .fx-capability-wide {
        display: block
    }

    .fx-cloud-visual {
        position: static;
        grid-template-columns: 1fr 1fr;
        margin-top: 28px
    }

    .fx-consulting-flow {
        margin-top: 25px
    }

    .fx-product-shell {
        padding: 30px 22px
    }

    .fx-delivery-grid {
        grid-template-columns: 1fr
    }

    .fx-cta-card {
        grid-template-columns: 1fr;
        padding: 32px 24px
    }

    .fx-tech-strip .container {
        gap: 12px
    }

    .fx-tech-strip i {
        display: none
    }
}


/* ==========================================================
   HOME SERVICES CAROUSEL
   ========================================================== */

.fx-services-carousel-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 92% 10%, rgba(37, 215, 255, .1), transparent 26%), linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.fx-services-carousel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 42px;
}

    .fx-services-carousel-heading .fx-section-heading {
        margin-bottom: 0;
    }

.fx-services-carousel-controls {
    display: flex;
    gap: 10px;
    padding-bottom: 6px;
}

.fx-carousel-control {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    color: var(--fx-ink);
    border: 1px solid var(--fx-line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 32px rgba(7, 31, 66, .08);
    transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

    .fx-carousel-control:hover:not(:disabled) {
        color: var(--fx-blue);
        border-color: rgba(22, 132, 255, .35);
        box-shadow: 0 18px 38px rgba(22, 132, 255, .14);
        transform: translateY(-2px);
    }

    .fx-carousel-control:disabled {
        cursor: not-allowed;
        opacity: .38;
    }

.fx-services-carousel-shell {
    position: relative;
}

.fx-services-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 2px 28px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

    .fx-services-carousel-viewport::-webkit-scrollbar {
        display: none;
    }

.fx-services-carousel-track {
    display: flex;
    gap: 22px;
}

.fx-home-service-slide {
    flex: 0 0 calc((100% - 44px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

.fx-home-service-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 570px;
    color: inherit;
    border: 1px solid rgba(220, 232, 247, .95);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(8, 38, 78, .09);
    text-decoration: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

    .fx-home-service-card:hover {
        color: inherit;
        border-color: rgba(22, 132, 255, .32);
        box-shadow: 0 34px 78px rgba(22, 132, 255, .17);
        transform: translateY(-8px);
    }

.fx-home-service-image {
    position: relative;
    overflow: hidden;
    min-height: 255px;
    background: var(--fx-navy);
}

    .fx-home-service-image img {
        width: 100%;
        height: 255px;
        object-fit: cover;
        transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
    }

.fx-home-service-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 15, 35, .02) 20%, rgba(3, 15, 35, .74) 100%), linear-gradient(135deg, rgba(22, 132, 255, .06), rgba(37, 215, 255, .18));
}

.fx-home-service-card:hover .fx-home-service-image img {
    filter: saturate(1.12);
    transform: scale(1.07);
}

.fx-home-service-number {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 8px 11px;
    color: var(--fx-navy);
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 11px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    backdrop-filter: blur(12px);
    font-size: .72rem;
    font-weight: 900;
}

.fx-home-service-icon {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(22, 132, 255, .92), rgba(37, 215, 255, .9));
    box-shadow: 0 15px 32px rgba(0, 0, 0, .2);
    font-size: 1.25rem;
}

.fx-home-service-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 28px;
}

.fx-home-service-category {
    color: var(--fx-blue);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.fx-home-service-content h3 {
    margin: 11px 0 12px;
    color: var(--fx-ink);
    font-size: 1.55rem;
    font-weight: 850;
    letter-spacing: -.03em;
}

.fx-home-service-content p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--fx-muted);
    line-height: 1.72;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.fx-home-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 20px 0 24px;
}

    .fx-home-service-tags span {
        padding: 6px 9px;
        color: #3d5674;
        border: 1px solid #e2ecf7;
        border-radius: 999px;
        background: #f4f8fd;
        font-size: .69rem;
        font-weight: 750;
    }

.fx-home-service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--fx-blue);
    font-weight: 850;
}

    .fx-home-service-link i {
        transition: transform .2s ease;
    }

.fx-home-service-card:hover .fx-home-service-link i {
    transform: translate(3px, -3px);
}

.fx-services-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 10px;
}

.fx-services-carousel-progress {
    position: relative;
    flex: 1;
    overflow: hidden;
    max-width: 430px;
    height: 4px;
    border-radius: 999px;
    background: #dce8f7;
}

    .fx-services-carousel-progress span {
        position: absolute;
        inset: 0 auto 0 0;
        width: 33.333%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--fx-blue), var(--fx-cyan));
        transform-origin: left center;
        transition: width .25s ease;
    }

.fx-services-view-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--fx-ink);
    font-weight: 850;
    text-decoration: none;
}

    .fx-services-view-all:hover {
        color: var(--fx-blue);
    }

@media (max-width: 1199.98px) {
    .fx-home-service-slide {
        flex-basis: calc((100% - 22px) / 2);
    }
}

@media (max-width: 767.98px) {
    .fx-services-carousel-heading {
        display: block;
        margin-bottom: 28px;
    }

    .fx-services-carousel-controls {
        margin-top: 20px;
        padding-bottom: 0;
    }

    .fx-home-service-slide {
        flex-basis: 88%;
    }

    .fx-home-service-card {
        min-height: 540px;
    }

    .fx-home-service-image,
    .fx-home-service-image img {
        min-height: 235px;
        height: 235px;
    }

    .fx-home-service-content {
        padding: 24px;
    }

    .fx-services-carousel-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .fx-services-carousel-progress {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .fx-home-service-slide {
        flex-basis: 94%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-services-carousel-viewport {
        scroll-behavior: auto;
    }

    .fx-home-service-card,
    .fx-home-service-image img,
    .fx-carousel-control {
        transition: none;
    }
}

/* ==========================================================
   FEITORIX HOME — MODERN HOVER & INTERACTION EFFECTS
   Applies to delivery/process cards and technology strip.
   ========================================================== */

/* ---------- DELIVERY / PROCESS CARDS ---------- */

.fx-delivery-grid article {
    isolation: isolate;
    overflow: hidden;
    cursor: default;
    transform: translateZ(0);
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), border-color .38s ease, box-shadow .38s ease, background-color .38s ease;
}

    .fx-delivery-grid article::before {
        content: "";
        position: absolute;
        z-index: -2;
        inset: 0;
        opacity: 0;
        background: radial-gradient( circle at 18% 14%, rgba(37, 215, 255, .18), transparent 34% ), linear-gradient( 145deg, rgba(22, 132, 255, .07), rgba(255, 255, 255, 0) 58% );
        transition: opacity .38s ease;
    }

    .fx-delivery-grid article::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -60%;
        left: -80%;
        width: 55%;
        height: 220%;
        opacity: 0;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .78), transparent );
        transform: rotate(20deg);
        transition: left .72s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
        pointer-events: none;
    }

    .fx-delivery-grid article:hover,
    .fx-delivery-grid article:focus-within {
        border-color: rgba(22, 132, 255, .34);
        background-color: #ffffff;
        box-shadow: 0 26px 64px rgba(22, 132, 255, .14), 0 8px 24px rgba(6, 21, 44, .08);
        transform: translateY(-9px);
    }

        .fx-delivery-grid article:hover::before,
        .fx-delivery-grid article:focus-within::before {
            opacity: 1;
        }

        .fx-delivery-grid article:hover::after,
        .fx-delivery-grid article:focus-within::after {
            left: 130%;
            opacity: .85;
        }

    .fx-delivery-grid article > i {
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(22, 132, 255, .10);
        transition: color .32s ease, background .32s ease, box-shadow .32s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
    }

        .fx-delivery-grid article > i::after {
            content: "";
            position: absolute;
            inset: -45%;
            opacity: 0;
            border-radius: 50%;
            background: radial-gradient( circle, rgba(255, 255, 255, .65), transparent 58% );
            transform: scale(.35);
            transition: opacity .3s ease, transform .45s ease;
        }

    .fx-delivery-grid article:hover > i,
    .fx-delivery-grid article:focus-within > i {
        color: #fff;
        background: linear-gradient( 135deg, var(--fx-blue), var(--fx-cyan) );
        box-shadow: 0 16px 30px rgba(22, 132, 255, .28), 0 0 0 7px rgba(22, 132, 255, .07);
        transform: translateY(-3px) rotate(-4deg) scale(1.06);
    }

        .fx-delivery-grid article:hover > i::after,
        .fx-delivery-grid article:focus-within > i::after {
            opacity: 1;
            transform: scale(1);
        }

    .fx-delivery-grid article > b {
        transition: color .32s ease, transform .38s cubic-bezier(.2, .8, .2, 1), text-shadow .32s ease;
    }

    .fx-delivery-grid article:hover > b,
    .fx-delivery-grid article:focus-within > b {
        color: rgba(22, 132, 255, .24);
        text-shadow: 0 0 26px rgba(37, 215, 255, .24);
        transform: translate(-3px, 3px) scale(1.12);
    }

    .fx-delivery-grid article h3 {
        transition: color .3s ease, transform .3s ease;
    }

    .fx-delivery-grid article:hover h3,
    .fx-delivery-grid article:focus-within h3 {
        color: var(--fx-blue);
        transform: translateX(3px);
    }

    .fx-delivery-grid article p {
        transition: color .3s ease, transform .3s ease;
    }

    .fx-delivery-grid article:hover p,
    .fx-delivery-grid article:focus-within p {
        color: #435a77;
        transform: translateX(3px);
    }

    /* Subtle lower accent line */

    .fx-delivery-grid article h3::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        margin-top: 10px;
        border-radius: 999px;
        background: linear-gradient( 90deg, var(--fx-blue), var(--fx-cyan) );
        transition: width .38s cubic-bezier(.2, .8, .2, 1);
    }

    .fx-delivery-grid article:hover h3::after,
    .fx-delivery-grid article:focus-within h3::after {
        width: 46px;
    }

/* ---------- TECHNOLOGY STRIP ---------- */

.fx-tech-strip {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    .fx-tech-strip::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        opacity: 0;
        background: linear-gradient( 90deg, rgba(22, 132, 255, .03), rgba(37, 215, 255, .09), rgba(22, 132, 255, .03) );
        transition: opacity .35s ease;
    }

    .fx-tech-strip:hover::before {
        opacity: 1;
    }

    .fx-tech-strip .container > span {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 5px 8px;
        color: #536a87;
        border-radius: 10px;
        transition: color .28s ease, background-color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
    }

        .fx-tech-strip .container > span::before {
            content: "";
            position: absolute;
            inset: auto 12px 1px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient( 90deg, var(--fx-blue), var(--fx-cyan) );
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .3s ease;
        }

        .fx-tech-strip .container > span:hover,
        .fx-tech-strip .container > span:focus-visible {
            color: var(--fx-blue);
            background: rgba(22, 132, 255, .06);
            box-shadow: 0 9px 24px rgba(22, 132, 255, .08);
            transform: translateY(-3px);
        }

            .fx-tech-strip .container > span:hover::before,
            .fx-tech-strip .container > span:focus-visible::before {
                transform: scaleX(1);
            }

    .fx-tech-strip .container > i {
        box-shadow: 0 0 0 0 rgba(37, 215, 255, .3);
        transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
    }

    .fx-tech-strip:hover .container > i {
        background-color: var(--fx-cyan);
        box-shadow: 0 0 0 5px rgba(37, 215, 255, .09);
        transform: scale(1.18);
    }

/* ---------- ACCESSIBILITY & RESPONSIVE ---------- */

@media (hover: none) {
    .fx-delivery-grid article:hover,
    .fx-delivery-grid article:focus-within {
        transform: none;
    }

    .fx-delivery-grid article::after {
        display: none;
    }

    .fx-tech-strip .container > span:hover {
        transform: none;
    }
}

@media (max-width: 767px) {
    .fx-delivery-grid article {
        min-height: auto;
    }

        .fx-delivery-grid article:hover,
        .fx-delivery-grid article:focus-within {
            transform: translateY(-4px);
        }

    .fx-tech-strip .container > span {
        padding: 7px 10px;
        border: 1px solid rgba(22, 132, 255, .09);
        background: #f8fbff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-delivery-grid article,
    .fx-delivery-grid article::before,
    .fx-delivery-grid article::after,
    .fx-delivery-grid article > i,
    .fx-delivery-grid article > i::after,
    .fx-delivery-grid article > b,
    .fx-delivery-grid article h3,
    .fx-delivery-grid article h3::after,
    .fx-delivery-grid article p,
    .fx-tech-strip::before,
    .fx-tech-strip .container > span,
    .fx-tech-strip .container > span::before,
    .fx-tech-strip .container > i {
        transition: none !important;
        animation: none !important;
    }
}