/* =========================================================
   VALUEFORIT SERVICES SECTION
   FINAL CSS
   Package 5B + Mobile Visuals + Animations

   Features:
   - Premium dark design
   - Scroll reveal
   - Tap/click accordion
   - Animated borders
   - Animated service visuals
   - Mobile animated visuals
   - Responsive
   - No hover dependency
   - Reduced-motion support
========================================================= */


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

.vf-services {

    position: relative;

    padding: 140px 0 130px;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(32, 227, 255, .06),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(62, 247, 164, .045),
            transparent 32%
        ),

        #05080f;

    overflow: hidden;

    isolation: isolate;

}


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

.vf-services::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    opacity: .025;

    background-image:

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

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

    background-size: 80px 80px;

}


/* =========================================================
   AMBIENT ORBS
========================================================= */

.vf-services-orb {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;

    opacity: .12;

    z-index: -1;

    animation:
        vfServiceOrbMove 18s ease-in-out infinite alternate;

}


.vf-services-orb-1 {

    background: #20e3ff;

    top: 15%;

    left: -250px;

}


.vf-services-orb-2 {

    background: #3ef7a4;

    right: -250px;

    bottom: 5%;

    animation-delay: 5s;

}


@keyframes vfServiceOrbMove {

    0% {

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

    100% {

        transform:
            translate3d(90px, -50px, 0)
            scale(1.2);

    }

}


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

.vf-services-header {

    max-width: 780px;

    margin: 0 auto 75px;

    text-align: center;

}


.vf-section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--vf-primary);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.vf-section-eyebrow::before,
.vf-section-eyebrow::after {

    content: "";

    width: 28px;

    height: 1px;

    background: var(--vf-gradient);

}


.vf-services-title {

    margin: 0;

    color: #fff;

    font-size: clamp(42px, 5vw, 48px);

    line-height: 1.04;

    letter-spacing: -2.5px;

    font-weight: 800;

}


.vf-services-title span {

    display: block;

    background: var(--vf-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.vf-services-intro {

    max-width: 680px;

    margin: 25px auto 0;

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

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   SERVICES LIST
========================================================= */

.vf-services-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


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

.vf-service-card {

    position: relative;

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

    border-radius: 24px;

    background:

        linear-gradient(
            135deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .018)
        );

    backdrop-filter: blur(18px);

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

    overflow: hidden;

    opacity: 0;

    transform: translateY(45px);

    transition:

        border-color .45s ease,

        background .45s ease,

        box-shadow .45s ease;

}


/* Animated border */

.vf-service-card::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: 24px;

    background:

        linear-gradient(
            115deg,
            transparent 25%,
            rgba(32, 227, 255, .7),
            rgba(62, 247, 164, .7),
            transparent 75%
        );

    background-size: 250% 250%;

    animation:
        vfServiceBorder 7s linear infinite;

    opacity: 0;

    pointer-events: none;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

}


.vf-service-card.is-visible {

    opacity: 1;

    transform: translateY(0);

}


.vf-service-card.is-active {

    border-color:
        rgba(32, 227, 255, .25);

    background:

        linear-gradient(
            135deg,
            rgba(32, 227, 255, .07),
            rgba(255, 255, 255, .025)
        );

    box-shadow:

        0 25px 70px rgba(0, 0, 0, .28),

        0 0 50px rgba(32, 227, 255, .045);

    animation:
        vfCardGlow 4s ease-in-out infinite;

}


.vf-service-card.is-active::before {

    opacity: 1;

}


@keyframes vfServiceBorder {

    0% {

        background-position:
            0% 50%;

    }

    50% {

        background-position:
            100% 50%;

    }

    100% {

        background-position:
            0% 50%;

    }

}


/* =========================================================
   ACTIVE CARD GLOW
========================================================= */

@keyframes vfCardGlow {

    0%,
    100% {

        box-shadow:

            0 25px 70px rgba(0, 0, 0, .28),

            0 0 35px rgba(32, 227, 255, .035);

    }

    50% {

        box-shadow:

            0 25px 70px rgba(0, 0, 0, .28),

            0 0 55px rgba(32, 227, 255, .10);

    }

}


/* =========================================================
   TRAVELLING LIGHT
========================================================= */

.vf-service-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: -30%;

    width: 30%;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #20e3ff,
            #3ef7a4,
            transparent
        );

    opacity: 0;

    pointer-events: none;

}


.vf-service-card.is-active::after {

    opacity: 1;

    animation:
        vfCardLight 4s linear infinite;

}


@keyframes vfCardLight {

    0% {

        left: -30%;

    }

    100% {

        left: 100%;

    }

}


/* =========================================================
   SERVICE TRIGGER
========================================================= */

.vf-service-trigger {

    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 30px;

    padding: 38px 42px;

    border: 0;

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;

}


.vf-service-number {

    align-self: start;

    padding-top: 4px;

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

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:

        color .4s ease,

        transform .4s ease;

}


.vf-service-card.is-active
.vf-service-number {

    color: var(--vf-primary);

    transform: translateX(4px);

    animation:
        vfNumberPulse 2.5s ease-in-out infinite;

}


@keyframes vfNumberPulse {

    0%,
    100% {

        text-shadow:
            0 0 0 transparent;

    }

    50% {

        text-shadow:
            0 0 18px rgba(32, 227, 255, .7);

    }

}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.vf-service-main h3 {

    margin: 0 0 12px;

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

    font-weight: 700;

    letter-spacing: -.8px;

}


.vf-service-main p {

    max-width: 780px;

    margin: 0;

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

    font-size: 15px;

    line-height: 1.7;

}


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

.vf-service-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;

}


.vf-service-tags span {

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 0 11px;

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

    border-radius: 50px;

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .4px;

    text-transform: uppercase;

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

}


.vf-service-card.is-active
.vf-service-tags span {

    opacity: 0;

    transform: translateY(8px);

    animation:
        vfTagReveal .5s
        cubic-bezier(.16, 1, .3, 1)
        forwards;

}


.vf-service-card.is-active
.vf-service-tags span:nth-child(1) {

    animation-delay: .05s;

}


.vf-service-card.is-active
.vf-service-tags span:nth-child(2) {

    animation-delay: .10s;

}


.vf-service-card.is-active
.vf-service-tags span:nth-child(3) {

    animation-delay: .15s;

}


.vf-service-card.is-active
.vf-service-tags span:nth-child(4) {

    animation-delay: .20s;

}


@keyframes vfTagReveal {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   SERVICE ACTION
========================================================= */

.vf-service-action {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 18px;

}


.vf-service-line {

    width: 45px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .25)
        );

}


.vf-service-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #fff;

    font-size: 24px;

    font-weight: 300;

    transition:

        transform .5s cubic-bezier(.16, 1, .3, 1),

        border-color .35s ease,

        background .35s ease,

        color .35s ease;

}


.vf-service-card.is-active
.vf-service-icon {

    transform: rotate(45deg);

    border-color:
        var(--vf-primary);

    color: #000;

    background:
        var(--vf-primary);

}


/* =========================================================
   EXPANDED DETAILS
========================================================= */

.vf-service-details {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows
        .65s
        cubic-bezier(.16, 1, .3, 1);

}


.vf-service-card.is-active
.vf-service-details {

    grid-template-rows: 1fr;

}


.vf-service-details-inner {

    min-height: 0;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, .8fr);

    gap: 60px;

    padding: 0 42px;

    opacity: 0;

    transform: translateY(-15px);

    transition:

        opacity .35s ease,

        transform .5s ease,

        padding .65s
        cubic-bezier(.16, 1, .3, 1);

}


.vf-service-card.is-active
.vf-service-details-inner {

    padding:
        0 42px
        48px;

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   DETAIL CONTENT
========================================================= */

.vf-service-detail-content {

    padding-top: 25px;

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

}


.vf-service-detail-label {

    margin-bottom: 15px;

    color: var(--vf-secondary);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.vf-service-detail-content h4 {

    max-width: 650px;

    margin: 0 0 15px;

    color: #fff;

    font-size: 26px;

    line-height: 1.25;

    letter-spacing: -.6px;

}


.vf-service-detail-content > p {

    max-width: 700px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   DETAIL ANIMATIONS
========================================================= */

.vf-service-card.is-active
.vf-service-detail-content h4 {

    animation:
        vfDetailHeading .7s
        cubic-bezier(.16, 1, .3, 1);

}


@keyframes vfDetailHeading {

    from {

        opacity: 0;

        transform:
            translateY(15px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.vf-service-card.is-active
.vf-service-detail-content > p {

    animation:
        vfDetailParagraph .7s
        .08s
        cubic-bezier(.16, 1, .3, 1)
        both;

}


@keyframes vfDetailParagraph {

    from {

        opacity: 0;

        transform:
            translateY(12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.vf-service-feature-grid {

    display: grid;

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

    gap: 12px;

    margin-top: 28px;

}


.vf-service-feature-grid div {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 50px;

    padding: 10px 14px;

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

    border-radius: 12px;

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

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

    font-size: 12px;

}


.vf-service-feature-grid span {

    color: var(--vf-primary);

    font-size: 9px;

    font-weight: 700;

}


.vf-service-card.is-active
.vf-service-feature-grid div {

    opacity: 0;

    transform:
        translateY(15px);

    animation:
        vfFeatureReveal .55s
        cubic-bezier(.16, 1, .3, 1)
        forwards;

}


.vf-service-card.is-active
.vf-service-feature-grid div:nth-child(1) {

    animation-delay: .10s;

}


.vf-service-card.is-active
.vf-service-feature-grid div:nth-child(2) {

    animation-delay: .16s;

}


.vf-service-card.is-active
.vf-service-feature-grid div:nth-child(3) {

    animation-delay: .22s;

}


.vf-service-card.is-active
.vf-service-feature-grid div:nth-child(4) {

    animation-delay: .28s;

}


.vf-service-card.is-active
.vf-service-feature-grid div:nth-child(5) {

    animation-delay: .34s;

}


.vf-service-card.is-active
.vf-service-feature-grid div:nth-child(6) {

    animation-delay: .40s;

}


@keyframes vfFeatureReveal {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   SERVICE VISUAL AREA
========================================================= */

.vf-service-visual {

    min-height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}


.vf-service-card.is-active
.vf-service-visual {

    animation:
        vfVisualAppear .8s
        cubic-bezier(.16, 1, .3, 1);

}


@keyframes vfVisualAppear {

    from {

        opacity: 0;

        transform:
            scale(.92)
            translateY(15px);

    }

    to {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}


/* =========================================================
   CODE ORBIT
========================================================= */

.vf-code-orbit {

    position: relative;

    width: 210px;

    height: 210px;

    border:
        1px solid rgba(32, 227, 255, .14);

    border-radius: 50%;

    animation:
        vfOrbit 12s linear infinite;

}


.vf-code-orbit::before {

    content: "";

    position: absolute;

    inset: 25px;

    border:
        1px dashed rgba(62, 247, 164, .18);

    border-radius: 50%;

}


.vf-code-core {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border:
        1px solid rgba(32, 227, 255, .4);

    border-radius: 20px;

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

    color: var(--vf-primary);

    font-size: 24px;

    box-shadow:
        0 0 35px rgba(32, 227, 255, .12);

}


.vf-code-node {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

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

    border-radius: 14px;

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

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .5px;

    backdrop-filter: blur(10px);

}


.node-one {

    top: -18px;

    left: 80px;

}


.node-two {

    right: -20px;

    top: 80px;

}


.node-three {

    bottom: -18px;

    left: 80px;

}


@keyframes vfOrbit {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


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

.vf-dashboard-visual {

    width: 270px;

    padding: 18px;

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

    border-radius: 18px;

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

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

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

}


.vf-dashboard-top {

    width: 55%;

    height: 8px;

    margin-bottom: 20px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--vf-primary),
            var(--vf-secondary)
        );

}


.vf-dashboard-row {

    display: grid;

    grid-template-columns:
        1.5fr 1fr .6fr;

    gap: 8px;

    margin-bottom: 10px;

}


.vf-dashboard-row span {

    height: 30px;

    border-radius: 7px;

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

}


.vf-dashboard-row span:first-child {

    background:
        rgba(32, 227, 255, .12);

}


@keyframes vfDashboardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


/* =========================================================
   TIME TRACKER VISUAL
========================================================= */

.vf-time-visual {

    width: 260px;

    padding: 30px;

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

    border-radius: 24px;

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

    text-align: center;

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

}


.vf-time-display {

    font-size: 44px;

    font-weight: 700;

    letter-spacing: -2px;

}


.vf-time-status {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 8px;

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

    font-size: 9px;

    letter-spacing: 1.5px;

}


.vf-time-status span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--vf-secondary);

    box-shadow:
        0 0 15px var(--vf-secondary);

    animation:
        vfPulse 1.8s ease-in-out infinite;

}


.vf-time-bar {

    height: 5px;

    margin-top: 25px;

    border-radius: 10px;

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

    overflow: hidden;

}


.vf-time-bar span {

    display: block;

    width: 68%;

    height: 100%;

    border-radius: 10px;

    background:
        var(--vf-gradient);

    animation:
        vfTimeProgress 4s ease-in-out infinite alternate;

}


@keyframes vfPulse {

    0%,
    100% {

        opacity: .4;

    }

    50% {

        opacity: 1;

    }

}


@keyframes vfTimeProgress {

    from {

        width: 45%;

    }

    to {

        width: 82%;

    }

}


@keyframes vfTimeFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


/* =========================================================
   SOCIAL MEDIA VISUAL
========================================================= */

.vf-social-visual {

    position: relative;

    width: 230px;

    height: 220px;

}


.vf-social-card {

    position: absolute;

    width: 150px;

    height: 180px;

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

    border-radius: 18px;

    background:

        linear-gradient(
            145deg,
            rgba(32, 227, 255, .09),
            rgba(255, 255, 255, .03)
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .2);

}


.vf-social-card::before {

    content: "";

    position: absolute;

    top: 18px;

    left: 18px;

    right: 18px;

    height: 75px;

    border-radius: 12px;

    background:

        linear-gradient(
            135deg,
            rgba(32, 227, 255, .3),
            rgba(62, 247, 164, .18)
        );

}


.vf-social-card:nth-child(1) {

    left: 0;

    top: 25px;

    transform: rotate(-10deg);

}


.vf-social-card:nth-child(2) {

    left: 40px;

    top: 5px;

    z-index: 2;

}


.vf-social-card:nth-child(3) {

    left: 80px;

    top: 30px;

    transform: rotate(10deg);

}


/* =========================================================
   GRAPHIC DESIGN VISUAL
========================================================= */

.vf-design-visual {

    position: relative;

    width: 240px;

    height: 220px;

}


.vf-design-sheet {

    position: absolute;

    width: 145px;

    height: 185px;

    padding: 18px;

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

    border-radius: 14px;

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

    transform: rotate(-8deg);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .25);

}


.vf-design-sheet.sheet-two {

    left: 65px;

    top: 30px;

    transform: rotate(8deg);

    background:
        rgba(32, 227, 255, .05);

}


.vf-design-sheet span {

    display: block;

    height: 8px;

    margin-bottom: 12px;

    border-radius: 10px;

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

}


.vf-design-sheet span:first-child {

    width: 70%;

    background:
        var(--vf-primary);

}


.vf-design-sheet span:nth-child(2) {

    width: 90%;

}


.vf-design-sheet span:nth-child(3) {

    width: 55%;

}


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

.vf-infra-visual {

    display: flex;

    flex-direction: column;

    align-items: center;

}


.vf-infra-node {

    min-width: 140px;

    padding: 16px 25px;

    border:
        1px solid rgba(32, 227, 255, .2);

    border-radius: 12px;

    background:
        rgba(32, 227, 255, .045);

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

    text-align: center;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.vf-infra-line {

    width: 1px;

    height: 30px;

    background:

        linear-gradient(
            var(--vf-primary),
            var(--vf-secondary)
        );

    position: relative;

}


.vf-infra-line::after {

    content: "";

    position: absolute;

    width: 5px;

    height: 5px;

    left: -2px;

    top: 0;

    border-radius: 50%;

    background:
        var(--vf-primary);

    box-shadow:
        0 0 12px var(--vf-primary);

    animation:
        vfNodeMove 2s linear infinite;

}


@keyframes vfNodeMove {

    from {

        transform:
            translateY(0);

    }

    to {

        transform:
            translateY(25px);

        opacity: 0;

    }

}


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

.vf-service-card.is-active
.vf-service-visual::before {

    content: "";

    position: absolute;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background:
        #20e3ff;

    box-shadow:

        80px 20px 0 rgba(32, 227, 255, .3),

        150px 100px 0 rgba(62, 247, 164, .4),

        -100px 120px 0 rgba(32, 227, 255, .25),

        50px -80px 0 rgba(62, 247, 164, .25);

    animation:
        vfVisualParticles 6s linear infinite;

    opacity: .5;

}


@keyframes vfVisualParticles {

    0% {

        transform:
            translateY(20px)
            rotate(0deg);

        opacity: .2;

    }

    50% {

        opacity: .7;

    }

    100% {

        transform:
            translateY(-25px)
            rotate(180deg);

        opacity: .2;

    }

}


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

.vf-services-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 55px;

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

    font-size: 14px;

}


.vf-services-bottom a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--vf-primary);

    text-decoration: none;

    font-weight: 600;

}


.vf-services-bottom a span {

    transition:
        transform .3s ease;

}


.vf-services-bottom a:hover span {

    transform:
        translateX(5px);

}


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

@media(max-width: 991px) {

    .vf-services {

        padding:
            110px 0;

    }


    .vf-services-header {

        margin-bottom: 55px;

    }


    .vf-service-trigger {

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

        gap: 20px;

        padding: 32px;

    }


    .vf-service-line {

        display: none;

    }


    .vf-service-details-inner {

        grid-template-columns: 1fr;

    }


    .vf-service-visual {

        min-height: 220px;

    }

}


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

@media(max-width: 576px) {


    /* -----------------------------------------------------
       SECTION
    ----------------------------------------------------- */

    .vf-services {

        padding:
            90px 0;

    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .vf-services-header {

        margin-bottom: 40px;

    }


    .vf-section-eyebrow {

        font-size: 9px;

        letter-spacing: 2.5px;

    }


    .vf-services-title {

        font-size: 30px;

        letter-spacing: -1.7px;

    }


    .vf-services-intro {

        font-size: 15px;

        line-height: 1.7;

    }


    /* -----------------------------------------------------
       SERVICE LIST
    ----------------------------------------------------- */

    .vf-services-list {

        gap: 12px;

    }


    .vf-service-card {

        border-radius: 18px;

    }


    .vf-service-card::before {

        border-radius: 18px;

    }


    /* -----------------------------------------------------
       SERVICE HEADER
    ----------------------------------------------------- */

    .vf-service-trigger {

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

        align-items: start;

        gap: 12px;

        padding:
            25px 20px;

    }


    .vf-service-number {

        font-size: 10px;

        padding-top: 4px;

    }


    .vf-service-main h3 {

        margin-bottom: 10px;

        font-size: 22px;

        line-height: 1.2;

        letter-spacing: -.5px;

    }


    .vf-service-main p {

        font-size: 13px;

        line-height: 1.65;

    }


    /* -----------------------------------------------------
       TAGS
    ----------------------------------------------------- */

    .vf-service-tags {

        gap: 6px;

        margin-top: 15px;

    }


    .vf-service-tags span {

        min-height: 25px;

        padding:
            0 9px;

        font-size: 8px;

    }


    /* -----------------------------------------------------
       ICON
    ----------------------------------------------------- */

    .vf-service-icon {

        width: 38px;

        height: 38px;

        font-size: 20px;

    }


    /* -----------------------------------------------------
       EXPANDED DETAILS
    ----------------------------------------------------- */

    .vf-service-details-inner {

        display: flex;

        flex-direction: column;

        gap: 0;

        padding:
            0 20px;

    }


    .vf-service-card.is-active
    .vf-service-details-inner {

        padding:
            0 20px
            30px;

    }


    /* -----------------------------------------------------
       MOBILE ANIMATED VISUAL

       IMPORTANT:
       This was previously hidden.
       Now it remains visible on mobile.
    ----------------------------------------------------- */

    .vf-service-visual {

        order: 1;

        display: flex;

        width: 100%;

        min-height: 155px;

        margin:
            8px 0 5px;

        align-items: center;

        justify-content: center;

        position: relative;

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

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

        overflow: hidden;

    }


    /* Mobile glow */

    .vf-service-visual::after {

        content: "";

        position: absolute;

        width: 120px;

        height: 120px;

        border-radius: 50%;

        background:

            radial-gradient(
                circle,
                rgba(32, 227, 255, .13),
                transparent 70%
            );

        filter: blur(15px);

        pointer-events: none;

    }


    .vf-service-card.is-active
    .vf-service-visual::after {

        animation:
            vfMobileVisualGlow 3s
            ease-in-out infinite;

    }


    @keyframes vfMobileVisualGlow {

        0%,
        100% {

            transform:
                scale(.85);

            opacity: .45;

        }

        50% {

            transform:
                scale(1.15);

            opacity: .8;

        }

    }


    /* -----------------------------------------------------
       MOBILE CODE ORBIT
    ----------------------------------------------------- */

    .vf-code-orbit {

        width: 130px;

        height: 130px;

    }


    .vf-code-orbit::before {

        inset: 18px;

    }


    .vf-code-core {

        width: 48px;

        height: 48px;

        border-radius: 14px;

        font-size: 17px;

    }


    .vf-code-node {

        width: 38px;

        height: 38px;

        border-radius: 10px;

        font-size: 7px;

    }


    .node-one {

        top: -12px;

        left: 46px;

    }


    .node-two {

        right: -14px;

        top: 46px;

    }


    .node-three {

        bottom: -12px;

        left: 46px;

    }


    /* -----------------------------------------------------
       MOBILE DASHBOARD
    ----------------------------------------------------- */

    .vf-dashboard-visual {

        width: 210px;

        padding: 13px;

        border-radius: 14px;

    }


    .vf-dashboard-top {

        margin-bottom: 13px;

    }


    .vf-dashboard-row {

        margin-bottom: 7px;

    }


    .vf-dashboard-row span {

        height: 22px;

        border-radius: 5px;

    }


    /* -----------------------------------------------------
       MOBILE TIME TRACKER
    ----------------------------------------------------- */

    .vf-time-visual {

        width: 205px;

        padding: 22px;

        border-radius: 18px;

    }


    .vf-time-display {

        font-size: 34px;

    }


    .vf-time-status {

        font-size: 7px;

    }


    .vf-time-bar {

        margin-top: 18px;

    }


    /* -----------------------------------------------------
       MOBILE SOCIAL
    ----------------------------------------------------- */

    .vf-social-visual {

        width: 190px;

        height: 165px;

        transform:
            scale(.82);

    }


    /* -----------------------------------------------------
       MOBILE DESIGN
    ----------------------------------------------------- */

    .vf-design-visual {

        width: 190px;

        height: 175px;

        transform:
            scale(.82);

    }


    /* -----------------------------------------------------
       MOBILE INFRASTRUCTURE
    ----------------------------------------------------- */

    .vf-infra-visual {

        transform:
            scale(.82);

    }


    /* -----------------------------------------------------
       DETAIL CONTENT
    ----------------------------------------------------- */

    .vf-service-detail-content {

        order: 2;

        padding-top: 20px;

        border-top: 0;

        position: relative;

    }


    /*
       Divider between animated visual
       and text content
    */

    .vf-service-detail-content::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        height: 1px;

        background:

            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, .10),
                transparent
            );

    }


    .vf-service-detail-label {

        padding-top: 18px;

    }


    .vf-service-detail-content h4 {

        font-size: 22px;

        line-height: 1.3;

    }


    .vf-service-detail-content > p {

        font-size: 13px;

        line-height: 1.7;

    }


    /* -----------------------------------------------------
       FEATURE GRID
    ----------------------------------------------------- */

    .vf-service-feature-grid {

        order: 4;

        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 22px;

    }


    .vf-service-feature-grid div {

        min-height: 44px;

        font-size: 11px;

    }


    /* -----------------------------------------------------
       MOBILE VISUAL PARTICLES
    ----------------------------------------------------- */

    .vf-service-card.is-active
    .vf-service-visual::before {

        width: 3px;

        height: 3px;

        box-shadow:

            55px 15px 0 rgba(32, 227, 255, .3),

            100px 70px 0 rgba(62, 247, 164, .35),

            -70px 80px 0 rgba(32, 227, 255, .22),

            30px -50px 0 rgba(62, 247, 164, .22);

    }


    /* -----------------------------------------------------
       BOTTOM CTA
    ----------------------------------------------------- */

    .vf-services-bottom {

        flex-direction: column;

        margin-top: 40px;

        gap: 8px;

        text-align: center;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width: 380px) {

    .vf-services-title {

        font-size: 28px;

    }


    .vf-service-trigger {

        padding:
            22px 16px;

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

    }


    .vf-service-card.is-active
    .vf-service-details-inner {

        padding-left: 16px;

        padding-right: 16px;

    }


    .vf-service-icon {

        width: 34px;

        height: 34px;

        font-size: 18px;

    }


    .vf-service-main h3 {

        font-size: 20px;

    }


    .vf-service-visual {

        min-height: 140px;

    }


    .vf-code-orbit {

        transform:
            scale(.9);

    }

}


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

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

    .vf-service-card,
    .vf-service-card::before,
    .vf-service-card::after,
    .vf-services-orb,
    .vf-code-orbit,
    .vf-dashboard-visual,
    .vf-time-visual,
    .vf-service-tags span,
    .vf-service-feature-grid div,
    .vf-service-detail-content h4,
    .vf-service-detail-content > p,
    .vf-service-visual,
    .vf-service-visual::before,
    .vf-service-visual::after,
    .vf-service-number {

        animation: none !important;

        transition: none !important;

    }

}