/* BICOM / pages/bodybalancecheck.css */


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

.bicom-page--balance img{
    width:100%;
}


/* =========================================================
   01 / INTRO
   ========================================================= */

.bicom-balance-intro{
    width:100%;
    padding:62px 0;
    background:var(--bicom-white);
}

.bicom-balance-intro__grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);
    gap:clamp(58px,7vw,105px);
    align-items:center;
}

.bicom-balance-intro__content{
    max-width:610px;
}

.bicom-balance-intro__title{
    margin:0;
    color:var(--bicom-navy);
    font-size:clamp(48px,4.4vw,68px);
    line-height:.96;
    font-weight:var(--bicom-weight-regular);
    letter-spacing:-.055em;
}

.bicom-balance-intro__title strong{
    font-weight:var(--bicom-weight-bold);
}

.bicom-balance-intro__visual{
    position:relative;

    height:455px;

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

    overflow:hidden;

    background:var(--bicom-white);
}

.bicom-balance-intro__visual:before{
    content:"";

    position:absolute;

    left:4%;
    right:4%;
    bottom:35px;

    height:40px;

    background:rgba(23,63,82,.1);

    filter:blur(28px);
}

.bicom-balance-intro__visual img{
    position:relative;
    z-index:1;

    width:100%;
    height:100%;

    object-fit:contain;
}


/* =========================================================
   02 / GROUPS
   ========================================================= */

.bicom-balance-groups{
    width:100%;
    padding:58px 0;

    background:var(--bicom-surface);
}

.bicom-balance-groups__grid{
    display:grid;
    grid-template-columns:minmax(460px,1.05fr) minmax(0,.95fr);

    gap:clamp(60px,7vw,105px);

    align-items:center;
}

.bicom-balance-groups__visual{
    display:flex;
    align-items:center;
    justify-content:center;

    height:420px;
}

.bicom-balance-groups__visual img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.bicom-balance-groups__content{
    max-width:580px;
}

.bicom-balance-groups__caption{
    display:flex;
    align-items:center;

    gap:17px;

    margin-top:29px;
}

.bicom-balance-groups__caption strong{
    color:var(--bicom-navy);

    font-size:42px;
    line-height:1;

    font-weight:var(--bicom-weight-bold);
    letter-spacing:-.05em;
}

.bicom-balance-groups__caption span{
    max-width:290px;

    color:var(--bicom-muted);

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

    font-weight:var(--bicom-weight-semibold);
}


/* =========================================================
   03 / SHOWCASE
   ========================================================= */

.bicom-balance-showcase{
    position:relative;

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

    overflow:hidden;

    background:
        var(--bicom-dark)
        url("/wp-content/uploads/2026/09/bicom-body-check-bg-1.webp")
        70% center / cover no-repeat;
}

.bicom-balance-showcase:before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(7,37,52,.98) 0%,
            rgba(7,37,52,.92) 30%,
            rgba(7,37,52,.72) 50%,
            rgba(7,37,52,.30) 70%,
            rgba(7,37,52,.04) 100%
        );
}

.bicom-balance-showcase:after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(7,37,52,0) 55%,
            rgba(7,37,52,.42) 100%
        );
}

.bicom-balance-showcase__inner{
    position:relative;
    z-index:2;

    min-height:520px;

    display:flex;
    align-items:center;
}

.bicom-balance-showcase__content{
    width:min(620px,54%);
}

.bicom-balance-showcase__title{
    margin:0;

    color:var(--bicom-white);

    font-size:clamp(46px,4.2vw,64px);
    line-height:.97;

    font-weight:var(--bicom-weight-regular);
    letter-spacing:-.05em;
}

.bicom-balance-showcase__title strong{
    font-weight:var(--bicom-weight-bold);
}

.bicom-balance-showcase__copy{
    max-width:550px;

    margin:23px 0 0;

    line-height:1.62;
}

.bicom-balance-showcase__facts{
    display:flex;
    flex-wrap:wrap;

    gap:12px 28px;

    margin-top:30px;
}

.bicom-balance-showcase__facts span{
    position:relative;

    padding-left:14px;

    color:var(--bicom-white);

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

    font-weight:var(--bicom-weight-bold);
}

.bicom-balance-showcase__facts span:before{
    content:"";

    position:absolute;

    left:0;
    top:7px;

    width:5px;
    height:5px;

    background:var(--bicom-green);
}


/* =========================================================
   04 / PROCESS
   ========================================================= */

.bicom-balance-process{
    width:100%;

    padding:62px 0;

    background:var(--bicom-white);
}

.bicom-balance-process__head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,.55fr);

    gap:60px;

    align-items:end;

    margin-bottom:40px;
}

.bicom-balance-process__head p{
    max-width:490px;

    margin:0;

    color:var(--bicom-text);

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

    font-weight:var(--bicom-weight-medium);
}

.bicom-balance-process__body{
    display:grid;

    grid-template-columns:minmax(500px,1.05fr) minmax(0,.95fr);

    gap:clamp(55px,7vw,95px);

    align-items:center;
}

.bicom-balance-process__media{
    height:370px;

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

    padding:22px;

    background:var(--bicom-surface);
}

.bicom-balance-process__media img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.bicom-balance-process__steps{
    display:grid;

    gap:24px;
}

.bicom-balance-process__step{
    display:grid;

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

    gap:15px;
}

.bicom-balance-process__step > span{
    padding-top:3px;

    color:var(--bicom-green);

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

    font-weight:var(--bicom-weight-bold);
}

.bicom-balance-process__step h3{
    margin:0;

    color:var(--bicom-navy);

    font-size:19px;
    line-height:1.25;

    font-weight:var(--bicom-weight-bold);
    letter-spacing:-.02em;
}

.bicom-balance-process__step p{
    margin:6px 0 0;

    color:var(--bicom-muted);

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

    font-weight:var(--bicom-weight-medium);
}


/* =========================================================
   05 / VERSIONS
   Intro stacked above, 3 equal columns full width.
   Dividers are pseudo-elements centered in the column gap,
   so all three columns get identical content width.
   ========================================================= */

.bicom-balance-versions{
    width:100%;

    padding:58px 0;

    background:var(--bicom-surface);
}

.bicom-balance-versions__grid{
    display:grid;

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

    gap:clamp(34px,4vw,48px);
}

.bicom-balance-versions__intro{
    max-width:640px;
}

.bicom-balance-versions__compare{
    --bicom-versions-gap:clamp(40px,5.5vw,76px);

    display:grid;

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

    column-gap:var(--bicom-versions-gap);
}

.bicom-balance-version{
    position:relative;

    min-width:0;

    padding:9px 0;
}

.bicom-balance-version + .bicom-balance-version:before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;
    left:calc(var(--bicom-versions-gap) * -.5);

    width:1px;

    background:var(--bicom-line);
}

.bicom-balance-version__name{
    display:block;

    color:var(--bicom-navy);

    font-size:clamp(32px,3vw,42px);
    line-height:1;

    font-weight:var(--bicom-weight-bold);
    letter-spacing:-.045em;
}

.bicom-balance-version__type{
    display:block;

    margin-top:8px;

    color:var(--bicom-green);

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

    font-weight:var(--bicom-weight-bold);

    letter-spacing:.1em;
    text-transform:uppercase;
}

.bicom-balance-version p{
    margin:16px 0 0;

    color:var(--bicom-text);

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

    font-weight:var(--bicom-weight-medium);
}

.bicom-balance-versions__upgrade{
    grid-column:1/-1;

    margin-top:27px;
    padding-top:22px;

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

    color:var(--bicom-navy);

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

    font-weight:var(--bicom-weight-bold);
}


/* =========================================================
   06 / RESULT
   ========================================================= */

.bicom-balance-result{
    width:100%;

    padding:62px 0;

    background:var(--bicom-white);
}

.bicom-balance-result__grid{
    display:grid;

    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);

    gap:clamp(58px,7vw,105px);

    align-items:center;
}

.bicom-balance-result__content{
    max-width:590px;
}

.bicom-balance-result__statement{
    margin-top:30px;

    padding-left:21px;

    border-left:3px solid var(--bicom-green);
}

.bicom-balance-result__statement p{
    margin:0;

    color:var(--bicom-navy);

    font-size:20px;
    line-height:1.45;

    font-weight:var(--bicom-weight-bold);
    letter-spacing:-.015em;
}

.bicom-balance-result__visual{
    height:390px;

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

.bicom-balance-result__visual img{
    width:100%;
    height:100%;

    object-fit:contain;
}


/* =========================================================
   07 / NOTE
   ========================================================= */

.bicom-balance-note{
    width:100%;

    padding:30px 0;

    background:var(--bicom-surface);
}

.bicom-balance-note__inner{
    display:grid;

    grid-template-columns:210px 1fr;

    gap:45px;

    align-items:start;
}

.bicom-balance-note strong{
    color:var(--bicom-navy);

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

    font-weight:var(--bicom-weight-bold);
}

.bicom-balance-note p{
    max-width:900px;

    margin:0;

    color:var(--bicom-muted);

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

    font-weight:var(--bicom-weight-medium);
}


/* =========================================================
   FINAL CTA
   Page-specific background
   ========================================================= */

.bicom-page--balance .bicom-contact-final{
    background-color:var(--bicom-dark);
    background-image:url("/wp-content/uploads/2026/10/bbc-siroky-2-1-scaled.webp");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:68% center;
}


/* =========================================================
   COMPACT DESKTOP
   ========================================================= */

@media(min-width:1025px) and (max-height:960px){

    .bicom-balance-intro,
    .bicom-balance-groups,
    .bicom-balance-process,
    .bicom-balance-versions,
    .bicom-balance-result{
        padding-top:40px;
        padding-bottom:40px;
    }

    .bicom-balance-intro__visual{
        height:350px;
    }

    .bicom-balance-groups__visual{
        height:315px;
    }

    .bicom-balance-showcase,
    .bicom-balance-showcase__inner{
        min-height:415px;
    }

    .bicom-balance-process__head{
        margin-bottom:30px;
    }

    .bicom-balance-process__media{
        height:290px;
    }

    .bicom-balance-process__steps{
        gap:18px;
    }

    .bicom-balance-versions__grid{
        gap:32px;
    }

    .bicom-balance-result__visual{
        height:300px;
    }

}


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

@media(max-width:1024px){

    .bicom-balance-intro__grid,
    .bicom-balance-groups__grid,
    .bicom-balance-process__body,
    .bicom-balance-result__grid{
        gap:44px;
    }

    .bicom-balance-showcase__content{
        width:62%;
    }

    .bicom-page--balance .bicom-contact-final{
        background-position:65% center;
    }

}


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

@media(max-width:767px){

    .bicom-balance-intro,
    .bicom-balance-groups,
    .bicom-balance-process,
    .bicom-balance-versions,
    .bicom-balance-result{
        padding-top:56px;
        padding-bottom:56px;
    }


    .bicom-balance-intro__grid,
    .bicom-balance-groups__grid,
    .bicom-balance-process__head,
    .bicom-balance-process__body,
    .bicom-balance-result__grid{
        grid-template-columns:1fr;
    }


    .bicom-balance-intro__grid,
    .bicom-balance-groups__grid,
    .bicom-balance-process__body,
    .bicom-balance-result__grid{
        gap:34px;
    }


    .bicom-balance-intro__title,
    .bicom-balance-showcase__title{
        font-size:clamp(38px,10vw,48px);
        line-height:1;
    }


    .bicom-balance-intro__visual{
        height:330px;

        order:-1;
    }


    .bicom-balance-groups__visual{
        height:310px;
    }


    .bicom-balance-groups__caption strong{
        font-size:36px;
    }


    .bicom-balance-showcase{
        min-height:580px;

        background-position:68% center;
    }


    .bicom-balance-showcase:before{
        background:
            linear-gradient(
                180deg,
                rgba(7,37,52,.92) 0%,
                rgba(7,37,52,.78) 54%,
                rgba(7,37,52,.48) 100%
            );
    }


    .bicom-balance-showcase__inner{
        min-height:580px;

        align-items:flex-end;

        padding:55px 0;
    }


    .bicom-balance-showcase__content{
        width:100%;
    }


    .bicom-balance-process__head{
        gap:20px;

        margin-bottom:32px;
    }


    .bicom-balance-process__media{
        height:290px;
    }


    .bicom-balance-versions__compare{
        grid-template-columns:1fr;
    }


    .bicom-balance-version{
        padding:22px 0;
    }


    .bicom-balance-version + .bicom-balance-version{
        border-top:1px solid var(--bicom-line);
    }


    .bicom-balance-version + .bicom-balance-version:before{
        content:none;
    }


    .bicom-balance-result__visual{
        height:310px;
    }


    .bicom-balance-note__inner{
        grid-template-columns:1fr;

        gap:9px;
    }


    .bicom-page--balance .bicom-contact-final{
        background-position:center center;
    }

}


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

@media(max-width:480px){

    .bicom-balance-intro__title,
    .bicom-balance-showcase__title{
        font-size:38px;
    }


    .bicom-balance-intro__visual{
        height:300px;
    }


    .bicom-balance-groups__visual{
        height:280px;
    }


    .bicom-balance-process__media{
        height:260px;
    }


    .bicom-balance-result__visual{
        height:280px;
    }

}