/* =========================================================
   FITRO HERO CSS
   Extracted from the last known-good Hero checkpoint.
   Desktop: 3D rings + cards
   Mobile <= 768px: HTML5 fitness video
   This file does NOT include Loader / Feature / Wave / Trainer CSS.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================
   HERO STAGE — REQUIRED STORY STACKING
========================================================= */

/* =====================================================
   FITRO HERO — FULL SCREEN VIDEO BACKGROUND V4
   ===================================================== */

.fitro-hero-stage {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 650px;
    isolation: isolate;
    overflow: hidden;
}

.fitro-ref-hero {
    position: relative !important;
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center;
    overflow: hidden !important;
    isolation: isolate;
    background: #0a162a !important;
}

/* Video behind all Hero content */

.fitro-ref-hero .fitro-hero-video-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.fitro-ref-hero .fitro-hero-main-video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 64% center !important;
    pointer-events: none;
}

/* Dark left gradient, clear right-side video */

.fitro-ref-hero .fitro-hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(6, 17, 36, .92) 0%,
            rgba(8, 21, 43, .81) 26%,
            rgba(9, 23, 46, .46) 52%,
            rgba(9, 23, 46, .10) 80%,
            rgba(9, 23, 46, .05) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 17, 34, .40) 0%,
            transparent 40%
        );
}

/* Content floats above video */

.fitro-ref-hero .fitro-ref-inner {
    position: relative !important;
    z-index: 5 !important;

    width: min(1420px, calc(100% - 96px)) !important;
    min-height: 100% !important;

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

 
        padding: 229px 756px 0px 0px !important;

    grid-template-columns: none !important;
}

/* Left content */

.fitro-ref-hero .fitro-ref-copy {
    position: relative;
    z-index: 6;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fitro-ref-hero .fitro-ref-title,
.fitro-ref-hero .fitro-ref-title * {
    color: #ffffff !important;
}

.fitro-ref-hero .fitro-ref-description {
    color: rgba(239, 244, 255, .85) !important;
}

/* CTA buttons stay clickable */

.fitro-ref-hero .fitro-ref-actions {
    position: relative;
    z-index: 7;
}

/* Trust strip at the bottom */

.fitro-ref-hero .fitro-hero-trust-marquee {
    position: absolute;
    display:none;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/* Hide unused original Hero visual elements */

.fitro-ref-hero .fitro-hero-3d-wrap,
.fitro-ref-hero .fitro-ref-tone,
.fitro-ref-hero .fitro-ref-left-glow,
.fitro-ref-hero .fitro-ref-mid-glow,
.fitro-ref-hero .fitro-ref-model-blue-glow,
.fitro-ref-hero .fitro-ref-right-vignette,
.fitro-ref-hero .fitro-hero-decoration {
    display: none !important;
}

/* Tablet */

@media (min-width: 721px) and (max-width: 1024px) {

    .fitro-ref-hero .fitro-ref-inner {
        width: calc(100% - 60px) !important;
    }

    .fitro-ref-hero .fitro-ref-copy {
        max-width: 570px !important;
    }

    .fitro-ref-hero .fitro-hero-main-video {
        object-position: 65% center !important;
    }

}

/* Mobile */

@media (max-width: 720px) {

    .fitro-hero-stage {
        height: 100svh;
        min-height: 600px;
    }

    .fitro-ref-hero {
        align-items: flex-end;
    }

    .fitro-ref-hero .fitro-ref-inner {
        width: calc(100% - 40px) !important;
        min-height: 100% !important;

        justify-content: flex-end;
        padding: 110px 0 105px !important;
    }

    .fitro-ref-hero .fitro-ref-copy {
        max-width: 100% !important;
    }

    .fitro-ref-hero .fitro-hero-main-video {
        object-position: 62% center !important;
    }

    .fitro-ref-hero .fitro-hero-video-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7, 18, 39, .96) 0%,
                rgba(8, 21, 43, .84) 31%,
                rgba(8, 21, 43, .34) 72%,
                rgba(8, 21, 43, .20) 100%
            );
    }

    .fitro-ref-hero .fitro-ref-title {
        font-size: clamp(43px, 11vw, 60px) !important;
        line-height: .91 !important;
    }

    .fitro-ref-hero .fitro-ref-actions {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

}

@media (max-width: 390px) {

    .fitro-ref-hero .fitro-ref-title {
        font-size: clamp(37px, 10vw, 44px) !important;
    }

    .fitro-ref-hero .fitro-ref-inner {
        padding-bottom: 95px !important;
    }

}

.fitro-hero-stage{

    position:relative;

    width:100%;
    height:100vh;
    min-height:100vh;

    z-index:30;

    background:#071426;

    isolation:isolate;

}


/* =========================================================
   STORY STACKING
========================================================= */

.fitro-scroll-story{

    position:relative;
    width:100%;

}



/* Hero must stay above loader during first viewport */

.fitro-hero-stage{

    z-index:30;

}

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

.fitro-ref-hero{

    position:relative;

    width:100%;
    height:100vh;
    min-height:100vh;

    overflow:hidden;

    z-index:1;

    background:
        radial-gradient(
            circle at 67% 46%,
            rgba(42,87,175,.28),
            transparent 28%
        ),
        radial-gradient(
            circle at 72% 52%,
            rgba(29,64,132,.22),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #08111f 0%,
            #0b1628 45%,
            #08111d 100%
        );

}

/* =========================================================
   FITRO HERO — REFERENCE STYLE
========================================================= */

.fitro-hero-stage{

    position:relative;
    width:100%;
    min-height:100vh;

}


.fitro-ref-hero{

    position:relative;
    min-height:100vh;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 67% 46%,
            rgba(42,87,175,.28),
            transparent 28%
        ),
        radial-gradient(
            circle at 72% 52%,
            rgba(29,64,132,.22),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #08111f 0%,
            #0b1628 45%,
            #08111d 100%
        );

}



/* =========================================================
   CINEMATIC BACKGROUND LAYERS
========================================================= */

.fitro-ref-tone,
.fitro-ref-left-glow,
.fitro-ref-mid-glow,
.fitro-ref-model-blue-glow,
.fitro-ref-right-vignette{

    position:absolute;
    inset:0;
    pointer-events:none;

}



.fitro-ref-tone{

    background:
        linear-gradient(
            90deg,
            rgba(3,8,16,.42) 0%,
            rgba(7,17,32,.18) 45%,
            rgba(3,8,16,.25) 100%
        );

    z-index:1;

}



.fitro-ref-left-glow{

    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(255,255,255,.035),
            transparent 35%
        );

    z-index:1;

}



.fitro-ref-mid-glow{

    background:
        radial-gradient(
            circle at 60% 48%,
            rgba(65,111,205,.18),
            transparent 35%
        );

    z-index:1;

}



.fitro-ref-model-blue-glow{

    background:
        radial-gradient(
            circle at 74% 50%,
            rgba(54,104,211,.16),
            transparent 30%
        );

    filter:blur(20px);

    z-index:1;

}



.fitro-ref-right-vignette{

    background:
        linear-gradient(
            90deg,
            transparent 70%,
            rgba(2,7,14,.42) 100%
        );

    z-index:2;

}



/* =========================================================
   INNER LAYOUT
========================================================= */

.fitro-ref-inner{

    position:relative;
    z-index:5;

    width:
        min(
            1380px,
            calc(100% - 70px)
        );

    min-height:100vh;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        40% 60%;

    align-items:center;

    gap:0;

    padding:
        100px 0
        120px !important;

}



/* =========================================================
   LEFT COPY
========================================================= */

.fitro-ref-copy{

    position:relative;

    z-index:10;

    max-width:560px;

    padding-left:8px;

}



/* =========================================================
   LABEL
========================================================= */

.fitro-ref-label{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:24px;

}



.fitro-ref-label-pill{

    display:inline-flex;

    align-items:center;

    min-height:34px;

    padding:
        0 14px;

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

    border-radius:999px;

    color:#c6d9ff;

    background:
        linear-gradient(
            180deg,
            rgba(67,103,168,.28),
            rgba(36,65,118,.22)
        );

    backdrop-filter:blur(12px);

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

    font-size:11px;

    font-weight:700;

    letter-spacing:.02em;

}



.fitro-ref-label-code{

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

    font-size:12px;

    font-weight:600;

    letter-spacing:.04em;

}



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

.fitro-ref-title{

    margin:0;

    color:#fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            62px,
            5.2vw,
            92px
        );

    font-weight:500;

    line-height:.92;

    letter-spacing:-.055em;

    text-wrap:balance;

}



.fitro-ref-title em{

    color:#fff;

    font-style:normal;

    font-weight:500;

}



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

.fitro-ref-description{

    max-width:500px;

    margin:
        28px 0
        0;

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

    font-size:14px;

    line-height:1.7;

    letter-spacing:.005em;

}



/* =========================================================
   ACTIONS
========================================================= */

.fitro-ref-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:36px;

}



.fitro-ref-primary,
.fitro-ref-secondary{

    min-height:54px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    padding:
        0 28px;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:
        transform .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;

}



.fitro-ref-primary{

    min-width:220px;

    color:#15284a;

    background:
        linear-gradient(
            180deg,
            #fff,
            #eef4ff
        );

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.20);

}



.fitro-ref-primary:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 22px 48px
        rgba(0,0,0,.26);

}



.fitro-ref-secondary{

    min-width:190px;

    color:#fff;

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

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

}



.fitro-ref-secondary:hover{

    transform:
        translateY(-2px);

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

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

}



/* =========================================================
   RIGHT 3D AREA
========================================================= */

.fitro-hero-3d-wrap{

    position:relative;

    width:100%;
    height:
        min(
            720px,
            76vh
        );

    min-height:600px;

    z-index:8;

    pointer-events:auto;

}



.fitro-hero-3d-glow{

    position:absolute;

    left:50%;
    top:50%;

    width:720px;
    height:620px;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(55,108,221,.25) 0%,
            rgba(41,86,180,.15) 35%,
            rgba(25,57,125,.06) 52%,
            transparent 72%
        );

    filter:blur(42px);

    pointer-events:none;

}



.fitro-hero-3d-canvas{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    background:transparent;

    outline:none;

}



.fitro-hero-3d-loading{

    position:absolute;

    left:50%;
    top:50%;

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

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

    font-size:10px;

    letter-spacing:.08em;

    text-transform:uppercase;

    pointer-events:none;

}



/* =========================================================
   DECORATIVE PARTICLE PLACEHOLDERS
========================================================= */

.fitro-hero-decoration{

    position:absolute;

    z-index:3;

    border-radius:50%;

    pointer-events:none;

}



.fitro-hero-decoration--one{

    width:20px;
    height:20px;

    right:18%;
    top:16%;

 background: radial-gradient(circle at 35% 30%, #ffe6b300, #c9a46a 55%, #5f4a30);

    filter:blur(.2px);

    box-shadow:
        0 0 20px
        rgba(224,185,117,.25);

}



.fitro-hero-decoration--two{

    width:34px;
    height:34px;

    right:8%;
    top:47%;

    background:
       
        radial-gradient(circle at 35% 30%, #fff, #7da0d7 55%, #69768a);
    box-shadow:
        0 0 28px
        rgba(207,222,247,.18);

}



.fitro-hero-decoration--three{

    width:14px;
    height:14px;

    right:31%;
    bottom:16%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #a9c7ff,
            #4f7cda 60%,
            #1f3f83
        );

    box-shadow:
        0 0 22px
        rgba(79,124,218,.35);

}



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

.fitro-ref-bottom{

    position:absolute;

    left:0;
    right:0;
    bottom:28px;

    z-index:20;

    display:flex;

    justify-content:center;

}



.fitro-ref-nav-shell{

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

    min-height:62px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:18px;

    padding:
        8px 9px
        8px 22px;

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

    border-radius:999px;

    background:
        rgba(11,24,44,.58);

    backdrop-filter:
        blur(22px);

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

    box-shadow:
        0 18px 46px
        rgba(0,0,0,.20);

}



.fitro-ref-nav{

    display:flex;

    align-items:center;

    gap:26px;

}



.fitro-ref-nav a{

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

    font-size:11px;

    font-weight:600;

    text-decoration:none;

    transition:
        color .25s ease;

}



.fitro-ref-nav a:hover,
.fitro-ref-nav a.active{

    color:#fff;

}



.fitro-ref-download{

    min-height:45px;

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:
        0 7px
        0 18px;

    border-radius:999px;

    color:#15284a;

    background:#fff;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}



.fitro-ref-download-icon{

    width:32px;
    height:32px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#fff;

    background:#244f9e;

}



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

@media(max-width:1200px){
.fitro-ref-inner{

        grid-template-columns:
            44% 56%;

        width:
            min(
                1180px,
                calc(100% - 50px)
            );
    
}



    .fitro-ref-title{

        font-size:
            clamp(
                54px,
                5vw,
                78px
            );
    
}



    .fitro-hero-3d-wrap{

        min-height:560px;
    
}
}



@media(max-width:900px){
.fitro-ref-inner{

        min-height:auto;

        grid-template-columns:
            1fr;

        padding:
            120px 0
            130px;
    
}



    .fitro-ref-copy{

        max-width:620px;
    
}



    .fitro-hero-3d-wrap{

        margin-top:30px;

        height:520px;

        min-height:520px;
    
}



    .fitro-ref-bottom{

        bottom:18px;
    
}
}



@media(max-width:720px){
.fitro-ref-inner{

        width:
            calc(100% - 36px);

        padding-top:100px;
    
}



    .fitro-ref-title{

        font-size:
            clamp(
                48px,
                13vw,
                64px
            );
    
}



    .fitro-ref-description{

        font-size:12px;
    
}



    .fitro-ref-actions{

        align-items:stretch;

        flex-direction:column;

        max-width:280px;
    
}



    .fitro-ref-primary,
.fitro-ref-secondary{

        width:100%;

        min-width:0;
    
}



    .fitro-hero-3d-wrap{

        height:420px;

        min-height:420px;
    
}



    .fitro-ref-nav{

        gap:14px;
    
}



    .fitro-ref-nav a:nth-child(4),
.fitro-ref-nav a:nth-child(5){

        display:none;
    
}
}


/* =========================================================
   HERO LEFT — REFERENCE MATCH OVERRIDES
========================================================= */

.fitro-ref-inner{

    position:relative !important;
    z-index:5 !important;
    width:min(1420px, calc(100% - 96px)) !important;
    min-height:100vh !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:minmax(590px, 43%) minmax(0, 57%) !important;
    align-items:center !important;
    gap:0 !important;
    padding:130px 0 120px !important;

}


/*.fitro-ref-copy{*/

/*    position:relative !important;*/
/*    z-index:20 !important;*/
/*    width:100% !important;*/
/*    max-width:650px !important;*/
/*    padding:0 !important;*/
/*    margin:0 !important;*/
/*    font-family:"Inter", Arial, sans-serif !important;*/

/*}*/


.fitro-ref-label{

    display:flex !important;
    align-items:center !important;
    gap:16px !important;
    margin:0 0 24px !important;

}


.fitro-ref-label-pill{

    min-height:32px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 14px !important;
    border:1px solid rgba(139,174,235,.20) !important;
    border-radius:999px !important;
    color:#bed2f6 !important;
    background:linear-gradient(180deg,rgba(59,90,148,.31),rgba(29,53,96,.25)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    font-family:"Inter", Arial, sans-serif !important;
    font-size:10px !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;

}


.fitro-ref-label-code{

    color:rgba(255,255,255,.50) !important;
    font-family:"Inter", Arial, sans-serif !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.015em !important;
    white-space:nowrap !important;

}


.fitro-ref-copy .fitro-ref-title{

    width:100% !important;
    max-width:650px !important;
    margin:0 !important;
    color:#f7f8fb !important;
    font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    font-size:clamp(72px,5vw,94px) !important;
    font-weight:600 !important;
    line-height:.84 !important;
    letter-spacing:-.055em !important;
    text-wrap:initial !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    text-shadow:0 1px 0 rgba(255,255,255,.03),0 14px 34px rgba(0,0,0,.08) !important;

}


.fitro-ref-copy .fitro-ref-title > span,
.fitro-ref-copy .fitro-ref-title > em{

    display:inline !important;
    color:#f7f8fb !important;
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    font-style:normal !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;

}


.fitro-ref-copy .fitro-ref-description{

    width:100% !important;
    max-width:500px !important;
    margin:28px 0 0 !important;
    color:rgba(236,241,249,.58) !important;
    font-family:"Inter", Arial, sans-serif !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.62 !important;
    letter-spacing:-.005em !important;

}


.fitro-ref-copy .fitro-ref-actions{

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:16px !important;
    width:auto !important;
    max-width:none !important;
    margin-top:34px !important;

}


.fitro-ref-copy .fitro-ref-primary,
.fitro-ref-copy .fitro-ref-secondary{

    width:auto !important;
    min-width:190px !important;
    min-height:52px !important;
    padding:0 26px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    font-family:"Inter", Arial, sans-serif !important;
    font-size:12px !important;
    font-weight:600 !important;
    letter-spacing:-.005em !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease !important;

}


.fitro-ref-copy .fitro-ref-primary{

    color:#13233e !important;
    border:1px solid rgba(255,255,255,.96) !important;
    background:linear-gradient(180deg,#fff,#f2f5fa) !important;
    box-shadow:0 15px 34px rgba(0,0,0,.18) !important;

}


.fitro-ref-copy .fitro-ref-primary:hover{

    transform:translateY(-2px) !important;
    box-shadow:0 21px 42px rgba(0,0,0,.24) !important;

}


.fitro-ref-copy .fitro-ref-secondary{

    color:#fff !important;
    border:1px solid rgba(255,255,255,.36) !important;
    background:rgba(255,255,255,.012) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;

}


.fitro-ref-copy .fitro-ref-secondary:hover{

    transform:translateY(-2px) !important;
    border-color:rgba(255,255,255,.55) !important;
    background:rgba(255,255,255,.045) !important;

}


.fitro-hero-3d-wrap{

    position:relative !important;
    width:100% !important;
    height:min(710px,76vh) !important;
    min-height:590px !important;
    z-index:8 !important;
    transform:translateX(30px) !important;

}


@media(max-width:1280px){
.fitro-ref-inner{

        width:min(1180px,calc(100% - 52px)) !important;
        grid-template-columns:minmax(500px,44%) minmax(0,56%) !important;
    
}


    .fitro-ref-copy{

        max-width:545px !important;
    
}


    .fitro-ref-copy .fitro-ref-title{

        max-width:545px !important;
        font-size:clamp(62px,5vw,80px) !important;
    
}
}


@media(max-width:900px){
.fitro-ref-inner{

        display:block !important;
        width:calc(100% - 40px) !important;
        padding:110px 0 125px !important;
    
}


    .fitro-ref-copy{

        max-width:650px !important;
    
}


    .fitro-ref-copy .fitro-ref-title{

        max-width:650px !important;
    
}


    .fitro-hero-3d-wrap{

        margin-top:48px !important;
        transform:none !important;
    
}
}


@media(max-width:620px){
.fitro-ref-inner{

        width:calc(100% - 34px) !important;
    
}


    .fitro-ref-copy .fitro-ref-title{

        font-size:clamp(52px,15vw,66px) !important;
        line-height:.88 !important;
    
}


    .fitro-ref-copy .fitro-ref-description{

        max-width:360px !important;
        font-size:12px !important;
    
}


    .fitro-ref-copy .fitro-ref-actions{

        flex-direction:column !important;
        align-items:flex-start !important;
        gap:12px !important;
    
}


    .fitro-ref-copy .fitro-ref-primary,
.fitro-ref-copy .fitro-ref-secondary{

        width:100% !important;
        max-width:280px !important;
    
}
}



/* =========================================================
   HERO CARD LAYER
========================================================= */

.fitro-hero-card-layer{

    position:absolute;
    inset:0;

    z-index:5;

    pointer-events:none;

    perspective:1500px;
    transform-style:preserve-3d;

}



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

.fitro-hero-health-card,
.fitro-hero-mobility-card{

    position: absolute;
    box-sizing: border-box;
    color: #fff;
    border: 1px solid rgb(197 215 245 / 9%);
    background: linear-gradient(309deg, rgb(163 196 255 / 0%), rgb(82 90 102 / 70%) 50%, rgb(111 131 167 / 78%));
    /* backdrop-filter: blur(22px) saturate(120%); */
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    /* box-shadow: 0 28px 65px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08); */
    transform-style: preserve-3d;

}



/* =========================================================
   RECOVERY CARD
========================================================= */

.fitro-hero-health-card--recovery{

    width: 281px;
    height: 284px;
    left: 10%;
    top: 3%;
    padding: 18px;
    border-radius: 27px;
    /* transform: perspective(1200px) rotateY(16deg) rotateZ(360deg) translateZ(25px); */

}

/* =========================================================
   READINESS CARD
========================================================= */
.fitro-hero-health-card--readiness{

    width: 261px;
    height: 257px;
    left: 50%;
    top: 8%;
    padding: 19px;
    border-radius: 45px;
    /* transform: perspective(1201px) rotateY(-5deg) rotateZ(1deg) translateZ(5px); */

}




/* =========================================================
   SCORE CARD TITLE
========================================================= */

.fitro-hero-health-card h3{

    margin:0;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:19px;

    font-weight:600;

    line-height:1.1;

}



/* =========================================================
   SCORE RINGS
========================================================= */

.fitro-hero-health-ring{

    position:relative;

    width:126px;
    height:126px;

    margin:
        15px auto
        4px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        conic-gradient(
            from 215deg,
            #d7e6ff 0deg,
            #d7e6ff 247deg,
            rgba(190,209,239,.16) 247deg,
            rgba(190,209,239,.16) 318deg,
            transparent 318deg
        );

}



.fitro-hero-health-ring::before{

    content:"";

    position:absolute;

    width:101px;
    height:101px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            rgba(65,85,120,.98),
            rgba(39,58,92,.98)
        );

}



.fitro-hero-health-ring--blue{

    background:
        conic-gradient(
            from 215deg,
            #6497ff 0deg,
            #6497ff 268deg,
            rgba(190,209,239,.16) 268deg,
            rgba(190,209,239,.16) 318deg,
            transparent 318deg
        );

}



.fitro-hero-health-ring-value,
.fitro-hero-health-ring-inner{

    position:absolute;

    inset:0;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}



.fitro-hero-health-ring-value strong,
.fitro-hero-health-ring-inner strong{

    color:#fff;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:29px;

    font-weight:600;

    line-height:1;

}



.fitro-hero-health-ring-value span,
.fitro-hero-health-ring-inner span{

    margin-top:5px;

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

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:9px;

}



/* =========================================================
   SCORE LEGEND
========================================================= */

.fitro-hero-health-legend{

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:10px;

    margin-top:7px;

}



.fitro-hero-health-legend span{

    display:flex;

    align-items:center;

    gap:5px;

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

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:8px;

    white-space:nowrap;

}



.fitro-hero-health-legend i{

    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:#e7efff;

}



.fitro-hero-health-legend span:last-child i{

    background:#6c96ef;

}



/* =========================================================
   MOBILITY FLOW CARD
========================================================= */
.fitro-hero-mobility-card{

    left: 12%;
    height: 257px;
    top: 47%;
    width: 552px;
    padding: 30.1px 19px 19px;
    border-radius: 27px;
    pointer-events: auto;
    transform: perspective(1400px) rotateX(-1deg) rotateY(-1.5deg) translateZ(40px);

}


/* card stack depth */
.fitro-hero-mobility-card::before,
.fitro-hero-mobility-card::after{

    content:"";

    position:absolute;

    left:24px;
    right:24px;

    height:100%;

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

    border-radius:25px;

    background:
        rgba(27,44,75,.50);

    z-index:-1;

}



.fitro-hero-mobility-card::before{

    top:10px;

    transform:
        translateZ(-15px)
        scale(.97);

}



.fitro-hero-mobility-card::after{

    top:19px;

    opacity:.50;

    transform:
        translateZ(-28px)
        scale(.93);

}



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

.fitro-hero-mobility-head{

    display:grid;

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

    align-items:center;

    gap:12px;

}



.fitro-hero-mobility-image{

    width:58px;
    height:58px;

    overflow:hidden;

    border-radius:12px;

    background:#172943;

}



.fitro-hero-mobility-image img{

    display:block;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    object-fit:cover;
    object-position:center;

}



.fitro-hero-mobility-copy{

    min-width:0;

}



.fitro-hero-mobility-copy h3,
.fitro-hero-mobility-head h3{

    margin:0;

    color:#fff;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:18px;

    font-weight:600;

    line-height:1.15;

}



.fitro-hero-mobility-copy p,
.fitro-hero-mobility-head p{

    overflow:hidden;

    margin:
        5px 0
        0;

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

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:9px;

    line-height:1.4;

    white-space:nowrap;

    text-overflow:ellipsis;

}



.fitro-hero-mobility-more,
.fitro-hero-mobility-head > button{

    width:34px;
    height:34px;

    padding:0;

    display:grid;

    place-items:center;

    border:0;

    border-radius:50%;

    color:#fff;

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

    font-size:12px;

    line-height:1;

    cursor:pointer;

}



/* =========================================================
   MOBILITY PROGRESS
========================================================= */

.fitro-hero-mobility-progress-head{

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:20px;

    margin-top:19px;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:9px;

}



.fitro-hero-mobility-progress-head span{

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

    font-weight:600;

}



.fitro-hero-mobility-progress-head strong{

    color:#fff;

    font-size:9px;

    font-weight:600;

    white-space:nowrap;

}



.fitro-hero-mobility-progress{

    width:100%;
    height:6px;

    margin-top:8px;

    overflow:hidden;

    border-radius:999px;

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

}



.fitro-hero-mobility-progress span{

    display:block;

    width:62%;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #dce8fb
        );

    box-shadow:
        0 0 10px
        rgba(255,255,255,.12);

}



/* =========================================================
   MOBILITY ACTIONS
========================================================= */

.fitro-hero-mobility-actions{

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:12px;

    margin-top:19px;

}



.fitro-hero-mobility-actions button,
.fitro-hero-mobility-actions a{

    min-height:40px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
        0 17px;

    border-radius:999px;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:10px;

    font-weight:600;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

}



.fitro-hero-mobility-actions button{

    gap:7px;

    border:0;

    color:#fff;

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

    cursor:pointer;

}



.fitro-hero-mobility-actions button span{

    font-size:17px;

}



.fitro-hero-mobility-actions a{

    min-width:122px;

    color:#18305c;

    background:#fff;

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.14);

}



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

@media(max-width:900px){
.fitro-hero-health-card--recovery{

        left:8%;
    
}



    .fitro-hero-health-card--readiness{

        left:auto;
        right:7%;
    
}



    .fitro-hero-mobility-card{

        left:50%;

        width:min(455px,90%);

        transform:
            translateX(-50%);
    
}
}



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

@media(max-width:620px){
.fitro-hero-card-layer{

        transform:
            scale(.78);

        transform-origin:
            center top;
    
}
}




/* =========================================================
   HERO CARDS — PREMIUM VISIBILITY + 3D HOVER
   Added last intentionally so these rules override the
   earlier experimental card styles without changing layout.
========================================================= */

/* The parent must keep perspective, but the individual cards
   must receive pointer events or :hover will never fire. */
.fitro-hero-card-layer{

    perspective:1600px !important;
    perspective-origin:52% 44% !important;
    transform-style:preserve-3d !important;
    pointer-events:none !important;

}



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

.fitro-hero-health-card,
.fitro-hero-mobility-card{

    pointer-events:auto !important;

    border:
        1px solid
        rgba(190,214,255,.23) !important;

    border-top-color:
        rgba(230,240,255,.34) !important;

    border-left-color:
        rgba(213,229,255,.30) !important;

    background:
        radial-gradient(
            circle at 18% 8%,
            rgba(188,213,255,.16),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(104,128,170,.72) 0%,
            rgba(65,85,123,.80) 45%,
            rgba(31,48,79,.88) 100%
        ) !important;

    backdrop-filter:
        blur(24px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(135%) !important;

    box-shadow:
        0 30px 70px rgba(0,5,20,.32),
        0 12px 26px rgba(0,0,0,.20),
        0 0 42px rgba(61,105,203,.10),
        inset 1px 1px 0 rgba(255,255,255,.16),
        inset -1px -1px 0 rgba(11,22,43,.30) !important;

    transform-style:
        preserve-3d !important;

    backface-visibility:
        hidden !important;

    will-change:
        transform,
        box-shadow,
        border-color !important;

    transition:
        transform .48s cubic-bezier(.2,.75,.2,1),
        box-shadow .48s ease,
        border-color .48s ease,
        background .48s ease,
        filter .48s ease !important;

    cursor:default;

}



/* Subtle glass sheen */
.fitro-hero-health-card{

    overflow:hidden;

}


.fitro-hero-health-card::after{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    border-radius:inherit;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,.035) 25%,
            transparent 48%
        );

    opacity:.72;

    transform:
        translateZ(18px);

}



/* =========================================================
   RESTING 3D POSE
========================================================= */

.fitro-hero-health-card--recovery{

    transform:
        perspective(1400px)
        rotateX(1.5deg)
        rotateY(5deg)
        rotateZ(-.5deg)
        translateZ(20px) !important;

}



.fitro-hero-health-card--readiness{

    transform:
        perspective(1400px)
        rotateX(1deg)
        rotateY(-5deg)
        rotateZ(.6deg)
        translateZ(10px) !important;

}



.fitro-hero-mobility-card{

    transform:
        perspective(1500px)
        rotateX(-1deg)
        rotateY(-2deg)
        translateZ(35px) !important;

}



/* =========================================================
   HEALTH CARD HOVER — STRONGER DEPTH
========================================================= */

.fitro-hero-health-card--recovery:hover{

    transform:
        perspective(1400px)
        translateY(-10px)
        translateZ(72px)
        rotateX(-4deg)
        rotateY(10deg)
        rotateZ(-1deg)
        scale(1.035) !important;

    border-color:
        rgba(177,207,255,.44) !important;

    box-shadow:
        -18px 34px 75px rgba(0,6,24,.40),
        14px 18px 36px rgba(24,67,147,.16),
        0 0 58px rgba(78,126,225,.18),
        inset 1px 1px 0 rgba(255,255,255,.20) !important;

}



.fitro-hero-health-card--readiness:hover{

    transform:
        perspective(1400px)
        translateY(-10px)
        translateZ(72px)
        rotateX(-4deg)
        rotateY(-10deg)
        rotateZ(1deg)
        scale(1.035) !important;

    border-color:
        rgba(177,207,255,.44) !important;

    box-shadow:
        18px 34px 75px rgba(0,6,24,.40),
        -14px 18px 36px rgba(24,67,147,.16),
        0 0 58px rgba(78,126,225,.18),
        inset 1px 1px 0 rgba(255,255,255,.20) !important;

}



/* =========================================================
   MOBILITY CARD HOVER
========================================================= */

.fitro-hero-mobility-card:hover{

    transform:
        perspective(1500px)
        translateY(-9px)
        translateZ(78px)
        rotateX(4deg)
        rotateY(-5deg)
        scale(1.018) !important;

    border-color:
        rgba(182,210,255,.43) !important;

    box-shadow:
        0 42px 90px rgba(0,5,22,.42),
        18px 18px 42px rgba(25,67,145,.13),
        0 0 64px rgba(70,115,211,.17),
        inset 1px 1px 0 rgba(255,255,255,.19) !important;

}



/* Make the stacked layers more visible as real depth */
.fitro-hero-mobility-card::before{

    top:12px !important;

    left:18px !important;
    right:18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(67,88,126,.64),
            rgba(25,40,68,.70)
        ) !important;

    border-color:
        rgba(184,207,244,.11) !important;

    box-shadow:
        0 18px 34px rgba(0,0,0,.18) !important;

    transform:
        translateZ(-22px)
        scale(.972) !important;

    transition:
        top .45s ease,
        transform .45s ease,
        opacity .45s ease !important;

}



.fitro-hero-mobility-card::after{

    top:23px !important;

    left:30px !important;
    right:30px !important;

    opacity:.68 !important;

    background:
        rgba(19,34,60,.72) !important;

    border-color:
        rgba(184,207,244,.07) !important;

    transform:
        translateZ(-44px)
        scale(.935) !important;

    transition:
        top .45s ease,
        transform .45s ease,
        opacity .45s ease !important;

}



.fitro-hero-mobility-card:hover::before{

    top:17px !important;

    transform:
        translateZ(-34px)
        scale(.968) !important;

}



.fitro-hero-mobility-card:hover::after{

    top:31px !important;

    transform:
        translateZ(-58px)
        scale(.925) !important;

}



/* =========================================================
   CONTENT DEPTH
========================================================= */

.fitro-hero-health-card h3,
.fitro-hero-health-ring,
.fitro-hero-health-legend,
.fitro-hero-mobility-head,
.fitro-hero-mobility-progress-head,
.fitro-hero-mobility-progress,
.fitro-hero-mobility-actions{

    position:relative;

    transform:
        translateZ(24px);

    transition:
        transform .45s cubic-bezier(.2,.75,.2,1);

}



.fitro-hero-health-card:hover h3,
.fitro-hero-health-card:hover .fitro-hero-health-ring,
.fitro-hero-health-card:hover .fitro-hero-health-legend{

    transform:
        translateZ(44px);

}



.fitro-hero-mobility-card:hover .fitro-hero-mobility-head,
.fitro-hero-mobility-card:hover .fitro-hero-mobility-progress-head,
.fitro-hero-mobility-card:hover .fitro-hero-mobility-progress,
.fitro-hero-mobility-card:hover .fitro-hero-mobility-actions{

    transform:
        translateZ(42px);

}



/* =========================================================
   SCORE RINGS — IMPROVED VISIBILITY
========================================================= */

.fitro-hero-health-ring{

    filter:
        drop-shadow(
            0 10px 22px
            rgba(0,0,0,.20)
        );

}



.fitro-hero-health-ring::before{

    box-shadow:
        inset 0 8px 18px rgba(255,255,255,.035),
        inset 0 -10px 20px rgba(0,0,0,.16);

}



.fitro-hero-health-ring-value strong,
.fitro-hero-health-ring-inner strong{

    text-shadow:
        0 4px 14px
        rgba(0,0,0,.25);

}



/* =========================================================
   MOBILITY CONTENT
========================================================= */

.fitro-hero-mobility-image{

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

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

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}



.fitro-hero-mobility-card:hover
.fitro-hero-mobility-image{

    transform:
        translateZ(16px)
        scale(1.06);

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

}



.fitro-hero-mobility-copy h3,
.fitro-hero-health-card h3{

    text-shadow:
        0 4px 16px
        rgba(0,0,0,.22);

}



/* Better readable secondary copy */
.fitro-hero-mobility-copy p,
.fitro-hero-mobility-head p{

    color:
        rgba(237,243,255,.62) !important;

}



.fitro-hero-health-legend span{

    color:
        rgba(239,245,255,.68) !important;

}



/* Progress contrast */
.fitro-hero-mobility-progress{

    background:
        rgba(7,18,37,.30) !important;

    box-shadow:
        inset 0 1px 3px
        rgba(0,0,0,.18);

}



.fitro-hero-mobility-progress span{

    background:
        linear-gradient(
            90deg,
            #f8fbff,
            #cfe0ff
        ) !important;

    box-shadow:
        0 0 15px
        rgba(217,231,255,.28) !important;

}



/* Buttons become more tactile */
.fitro-hero-mobility-actions button,
.fitro-hero-mobility-actions a{

    transition:
        transform .28s ease,
        background .28s ease,
        box-shadow .28s ease !important;

}



.fitro-hero-mobility-actions button:hover,
.fitro-hero-mobility-actions a:hover{

    transform:
        translateY(-2px)
        translateZ(10px);

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

}



/* =========================================================
   NO HOVER TILT ON TOUCH DEVICES
========================================================= */

@media (hover:none), (pointer:coarse){
.fitro-hero-health-card--recovery:hover{

        transform:
            perspective(1400px)
            rotateX(1.5deg)
            rotateY(5deg)
            rotateZ(-.5deg)
            translateZ(20px) !important;
    
}



    .fitro-hero-health-card--readiness:hover{

        transform:
            perspective(1400px)
            rotateX(1deg)
            rotateY(-5deg)
            rotateZ(.6deg)
            translateZ(10px) !important;
    
}



    .fitro-hero-mobility-card:hover{

        transform:
            perspective(1500px)
            rotateX(-1deg)
            rotateY(-2deg)
            translateZ(35px) !important;
    
}
}



/* =========================================================
   2. LIGHTER / CLEANER HERO BACKGROUND
========================================================= */

.fitro-ref-hero{

    background:
        radial-gradient(
            circle at 70% 42%,
            rgba(91,137,226,.17),
            transparent 31%
        ),
        radial-gradient(
            circle at 22% 32%,
            rgba(91,131,205,.07),
            transparent 40%
        ),
        radial-gradient(
            circle at 76% 82%,
            rgba(65,106,194,.08),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0c1b31 0%,
            #10243f 48%,
            #0b1a30 100%
        ) !important;

}



/* soften the heavy overlays */
.fitro-ref-tone{

    background:
        linear-gradient(
            90deg,
            rgba(4,11,22,.24) 0%,
            rgba(7,17,32,.08) 44%,
            rgba(3,8,16,.14) 100%
        ) !important;

}



.fitro-ref-left-glow{

    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(255,255,255,.028),
            transparent 37%
        ) !important;

}



.fitro-ref-mid-glow{

    background:
        radial-gradient(
            circle at 60% 48%,
            rgba(85,131,221,.12),
            transparent 37%
        ) !important;

}



.fitro-ref-model-blue-glow{

    background:
        radial-gradient(
            circle at 74% 50%,
            rgba(80,127,224,.13),
            transparent 34%
        ) !important;

    filter:blur(18px) !important;

}



.fitro-ref-right-vignette{

    background:
        linear-gradient(
            90deg,
            transparent 72%,
            rgba(2,7,14,.24) 100%
        ) !important;

}



/* =========================================================
   3. HERO COPY — SLIGHTLY LIGHTER
========================================================= */

.fitro-ref-copy .fitro-ref-title{

    color:#f7f9fc !important;

}



.fitro-ref-copy .fitro-ref-description{

    color:
        rgba(231,238,249,.64) !important;

}



.fitro-ref-label-pill{

    color:#c7d9fa !important;

    border:
        1px solid rgba(151,185,246,.16) !important;

    background:
        rgba(65,103,168,.18) !important;

}



.fitro-ref-label-code{

    color:
        rgba(224,234,248,.52) !important;

}



/* =========================================================
   4. PRIMARY CTA — BLUE INSTEAD OF HEAVY WHITE
========================================================= */

.fitro-ref-copy .fitro-ref-primary{

    color:#071426 !important;

    border:
        1px solid rgba(170,201,255,.72) !important;

    background:
        linear-gradient(
            135deg,
            #79aaff,
            #b4cef9
        ) !important;

    box-shadow:
        0 15px 34px rgba(65,114,211,.23) !important;

}



.fitro-ref-copy .fitro-ref-primary:hover{

    box-shadow:
        0 20px 42px rgba(65,114,211,.30) !important;

}



/* =========================================================
   5. SECONDARY CTA
========================================================= */

.fitro-ref-copy .fitro-ref-secondary{

    color:
        rgba(244,248,255,.88) !important;

    border:
        1px solid rgba(190,210,243,.22) !important;

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

}



/* =========================================================
   6. MOVING TRUST STRIP
========================================================= */

.fitro-hero-trust-marquee{

    position:absolute;

    left:0;
    right:0;

    bottom:1px;

    z-index:18;

    overflow:hidden;

       padding: 25px 0;
    border-top: 1px solid rgb(178 188 207 / 53%);
    border-bottom: 1px solid rgba(174, 198, 239, .08);
    background: rgb(212 225 237 / 28%);

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

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

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

}



.fitro-hero-trust-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    white-space:nowrap;

    animation:
        fitroTrustMarquee
        28s
        linear
        infinite;

}



.fitro-hero-trust-track span{

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:10px;

    font-weight:600;

    letter-spacing:.13em;

    text-transform:uppercase;

    color:
        rgba(224,234,249,.62);

}



.fitro-hero-trust-track i{

    flex:0 0 auto;

    color:#82aaf4;

    font-size:8px;

    font-style:normal;

    opacity:.78;

}



/* pause slightly on hover */
.fitro-hero-trust-marquee:hover
.fitro-hero-trust-track{

    animation-play-state:paused;

}



/* =========================================================
   7. BOTTOM NAV — LIGHTER GLASS
========================================================= */

.fitro-ref-nav-shell{

    border:
        1px solid rgba(187,209,244,.10) !important;

    background:
        rgba(12,29,52,.42) !important;

    backdrop-filter:
        blur(20px) !important;

    -webkit-backdrop-filter:
        blur(20px) !important;

    box-shadow:
        0 16px 42px rgba(0,0,0,.16) !important;

}



.fitro-ref-nav a{

    color:
        rgba(229,237,250,.58) !important;

}



.fitro-ref-nav a:hover,
.fitro-ref-nav a.active{

    color:#fff !important;

}



.fitro-ref-download{

    color:#0b1a30 !important;

    background:
        linear-gradient(
            135deg,
            #f6f9ff,
            #dfeafb
        ) !important;

}



.fitro-ref-download-icon{

    background:
        linear-gradient(
            135deg,
            #3b6fc9,
            #5f8fe8
        ) !important;

}



/* =========================================================
   8. HERO CARDS — REDUCE HEAVINESS
========================================================= */

.fitro-hero-health-card,
.fitro-hero-mobility-card{

    border-color:
        rgba(195,216,250,.16) !important;

    background:
        radial-gradient(
            circle at 18% 8%,
            rgba(193,216,255,.11),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(83,105,145,.58) 0%,
            rgba(51,71,105,.70) 46%,
            rgba(26,43,72,.78) 100%
        ) !important;

    box-shadow:
        0 26px 60px rgba(0,5,20,.22),
        0 10px 22px rgba(0,0,0,.12),
        0 0 38px rgba(61,105,203,.07),
        inset 1px 1px 0 rgba(255,255,255,.10) !important;

}



/* =========================================================
   9. MOBILE
========================================================= */

@media(max-width:900px){
.fitro-hero-trust-marquee{

        bottom:92px;
    
}
}



@media(max-width:620px){
.fitro-hero-trust-marquee{

        bottom:84px;

        padding:
            10px 0;
    
}



    .fitro-hero-trust-track{

        gap:22px;

        animation-duration:
            24s;
    
}



    .fitro-hero-trust-track span{

        font-size:9px;
    
}
}



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

@media(prefers-reduced-motion:reduce){
.fitro-hero-trust-track{

        animation:none;
    
}
}


/* =========================================================
   FITRO HERO — SAFE STAGGERED INTRO
   Pure CSS: no JS trigger required.
========================================================= */

/*
|--------------------------------------------------------------------------
| IMPORTANT
|--------------------------------------------------------------------------
| Earlier hero rules force title spans to display:inline !important.
| These later rules intentionally override that so translateY animation
| can work and each hero title line stays on its own row.
|--------------------------------------------------------------------------
*/

.fitro-ref-copy .fitro-ref-label,
.fitro-ref-copy .fitro-ref-description,
.fitro-ref-copy .fitro-ref-actions{

    opacity:0;

    transform:
        translate3d(
            0,
            34px,
            0
        );

    will-change:
        opacity,
        transform;

}



.fitro-ref-copy
.fitro-ref-title
> .fitro-title-line{

    display:block !important;

    width:max-content;
    max-width:100%;

    opacity:0;

    transform:
        translate3d(
            0,
            46px,
            0
        );

    will-change:
        opacity,
        transform;

}



/* =========================================================
   LABEL
========================================================= */

.fitro-ref-copy .fitro-ref-label{

    animation:
        fitroHeroComeUp
        .74s
        cubic-bezier(.22,1,.36,1)
        .12s
        forwards;

}



/* =========================================================
   TITLE — STAGGERED
========================================================= */

.fitro-ref-copy
.fitro-ref-title
> .fitro-title-line:nth-child(1){

    animation:
        fitroHeroTitleComeUp
        .92s
        cubic-bezier(.22,1,.36,1)
        .24s
        forwards;

}



.fitro-ref-copy
.fitro-ref-title
> .fitro-title-line:nth-child(2){

    animation:
        fitroHeroTitleComeUp
        .92s
        cubic-bezier(.22,1,.36,1)
        .38s
        forwards;

}



.fitro-ref-copy
.fitro-ref-title
> .fitro-title-line:nth-child(3){

    animation:
        fitroHeroTitleComeUp
        .92s
        cubic-bezier(.22,1,.36,1)
        .52s
        forwards;

}



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

.fitro-ref-copy .fitro-ref-description{

    animation:
        fitroHeroComeUp
        .80s
        cubic-bezier(.22,1,.36,1)
        .70s
        forwards;

}



/* =========================================================
   ACTIONS
========================================================= */

.fitro-ref-copy .fitro-ref-actions{

    animation:
        fitroHeroComeUp
        .80s
        cubic-bezier(.22,1,.36,1)
        .84s
        forwards;

}



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

@media(prefers-reduced-motion:reduce){
.fitro-ref-copy .fitro-ref-label,
.fitro-ref-copy
    .fitro-ref-title
    > .fitro-title-line,
.fitro-ref-copy .fitro-ref-description,
.fitro-ref-copy .fitro-ref-actions{

        opacity:1 !important;

        transform:none !important;

        animation:none !important;
    
}
}



/* =========================================================
   FITRO HERO — MOBILE VIDEO MODE
   ---------------------------------------------------------
   <= 768px:
   - hide 3D canvas + all floating cards
   - show real fitness video directly below hero copy
   - desktop/tablet landscape keep existing 3D experience
========================================================= */

.fitro-hero-mobile-video{

    display:none;

}


@media(max-width:768px){
.fitro-hero-stage,
.fitro-ref-hero{

        height:auto !important;
        min-height:100svh !important;
    
}


    .fitro-ref-inner{

        width:100% !important;
        max-width:100% !important;

        min-height:auto !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;

        gap:26px !important;

        margin:0 !important;

        padding:
            92px
            16px
            76px !important;
    
}



    /* ---------------- COPY ---------------- */

    .fitro-ref-copy{

        width:100% !important;
        max-width:460px !important;

        margin:0 auto !important;
        padding:0 !important;

        text-align:center !important;
    
}


    .fitro-ref-label{

        justify-content:center !important;

        gap:8px !important;

        margin-bottom:15px !important;

        flex-wrap:wrap !important;
    
}


    .fitro-ref-label-pill{

        min-height:29px !important;

        padding:
            0 11px !important;

        font-size:8px !important;
    
}


    .fitro-ref-label-code{

        font-size:9px !important;
    
}


    .fitro-ref-copy .fitro-ref-title{

        width:100% !important;
        max-width:100% !important;

        margin:0 auto !important;

        font-size:
            clamp(
                42px,
                11.5vw,
                58px
            ) !important;

        line-height:.92 !important;
        letter-spacing:-.045em !important;

        text-align:center !important;
    
}


    .fitro-ref-copy .fitro-ref-title > span{

        display:block !important;
        width:100% !important;
    
}


    .fitro-ref-copy .fitro-ref-description{

        width:100% !important;
        max-width:350px !important;

        margin:
            18px auto
            0 !important;

        font-size:11px !important;
        line-height:1.55 !important;

        text-align:center !important;
    
}


    .fitro-ref-copy .fitro-ref-actions{

        width:100% !important;
        max-width:330px !important;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;

        gap:8px !important;

        margin:
            22px auto
            0 !important;
    
}


    .fitro-ref-copy .fitro-ref-primary,
.fitro-ref-copy .fitro-ref-secondary{

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        min-height:44px !important;

        padding:
            0 12px !important;

        font-size:9px !important;
    
}



    /* ---------------- DESKTOP 3D OFF ---------------- */

    .fitro-hero-3d-glow,
.fitro-hero-3d-canvas,
.fitro-hero-card-layer,
.fitro-hero-health-card,
.fitro-hero-mobility-card{

        display:none !important;
    
}



    /* ---------------- MOBILE VIDEO ---------------- */

    .fitro-hero-3d-wrap{

        width:100% !important;
        max-width:430px !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 auto !important;

        transform:none !important;

        overflow:visible !important;

        pointer-events:auto !important;
    
}


    .fitro-hero-mobile-video{

        position:relative;

        display:block !important;

        width:100%;
        max-width:100%;

        aspect-ratio:16 / 10;

        overflow:hidden;

        border:
            1px solid
            rgba(157,190,245,.18);

        border-radius:24px;

        background:#0b1729;

        box-shadow:
            0 26px 54px
            rgba(0,0,0,.28),
            0 0 48px
            rgba(55,104,207,.10);
    
}


    .fitro-hero-mobile-video::before{

        content:"";

        position:absolute;
        inset:0;

        z-index:2;

        pointer-events:none;

        background:
            linear-gradient(
                180deg,
                rgba(5,12,24,.04),
                rgba(5,12,24,.12)
            );
    
}


    .fitro-hero-mobile-video video{

        display:block;

        width:100%;
        height:100%;

        object-fit:cover;
        object-position:center;

        border-radius:inherit;
    
}



    /* ---------------- DECORATION ---------------- */

    .fitro-hero-decoration--one,
.fitro-hero-decoration--two,
.fitro-hero-decoration--three{

        display:none !important;
    
}



    /* ---------------- TRUST STRIP ---------------- */

    .fitro-hero-trust-marquee{

        position:absolute !important;

        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        width:100% !important;

        padding:
            10px 0 !important;

        overflow:hidden !important;
    
}


    .fitro-hero-trust-track{

        gap:18px !important;

        animation-duration:25s !important;
    
}


    .fitro-hero-trust-track span{

        font-size:8px !important;
        letter-spacing:.10em !important;
    
}
}



@media(max-width:520px){
.fitro-ref-inner{

        padding:
            86px
            12px
            72px !important;

        gap:22px !important;
    
}


    .fitro-ref-copy{

        max-width:380px !important;
    
}


    .fitro-ref-copy .fitro-ref-title{

        font-size:
            clamp(
                38px,
                11.7vw,
                49px
            ) !important;
    
}


    .fitro-ref-copy .fitro-ref-description{

        max-width:310px !important;

        font-size:10.5px !important;
    
}


    .fitro-ref-copy .fitro-ref-actions{

        max-width:300px !important;

        grid-template-columns:1fr !important;
    
}


    .fitro-hero-3d-wrap{

        max-width:360px !important;
    
}


    .fitro-hero-mobile-video{

        aspect-ratio:4 / 3;

        border-radius:20px;
    
}
}



@media(max-width:390px){
.fitro-ref-inner{

        padding:
            80px
            10px
            68px !important;
    
}


    .fitro-ref-copy{

        max-width:330px !important;
    
}


    .fitro-ref-copy .fitro-ref-title{

        font-size:
            clamp(
                35px,
                11.5vw,
                44px
            ) !important;
    
}


    .fitro-ref-copy .fitro-ref-description{

        max-width:285px !important;
    
}


    .fitro-ref-copy .fitro-ref-actions{

        max-width:276px !important;
    
}


    .fitro-hero-3d-wrap{

        max-width:320px !important;
    
}
}

/* =========================================================
   HERO ANIMATION KEYFRAMES
========================================================= */

@keyframes fitroTrustMarquee{

    from{
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to{
        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }

}


@keyframes fitroHeroComeUp{

    from{
        opacity:0;

        transform:
            translate3d(
                0,
                34px,
                0
            );
    }

    to{
        opacity:1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}


@keyframes fitroHeroTitleComeUp{

    from{
        opacity:0;

        transform:
            translate3d(
                0,
                46px,
                0
            );
    }

    to{
        opacity:1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}

/* =============================================================
   FITRO HERO — DESKTOP RIGHT-SIDE VIDEO (2026-10)
   Uses the existing .fitro-hero-mobile-video within #fitroHero3DWrap.
   All mobile layout rules above stay untouched.
   No new video container or full-screen background required.
============================================================= */
@media (min-width: 769px) {
  .fitro-ref-hero .fitro-ref-inner {
    position: relative !important;
    isolation: isolate;
  }

  /* Text remains above the visual layer if their edges overlap. */
  .fitro-ref-hero .fitro-ref-copy {
    position: relative !important;
    z-index: 12 !important;
  }

  .fitro-ref-hero #fitroHero3DWrap.fitro-hero-3d-wrap {
    position: relative !important;
    z-index: 4 !important;
    isolation: isolate;
    overflow: hidden !important;
    border-radius: 28px;
    /* Retain existing right-column width and vertical placement. */
    background: #101f37;
    box-shadow: 0 30px 85px rgba(3, 10, 27, .24);
  }

  /* Reuse existing video tag; only switch its visibility on desktop. */
  .fitro-ref-hero #fitroHero3DWrap .fitro-hero-mobile-video {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    background: #101f37;
    pointer-events: none;
  }

  .fitro-ref-hero #fitroHero3DWrap .fitro-hero-mobile-video video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    border-radius: inherit;
  }

  /* Subtle left vignette where video meets editorial copy. */
  .fitro-ref-hero #fitroHero3DWrap .fitro-hero-mobile-video::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(10, 24, 45, .38), transparent 42%);
  }

  /* Old 3D/card layers must not cover the real gym video. */
  .fitro-ref-hero #fitroHero3DWrap .fitro-hero-3d-glow,
  .fitro-ref-hero #fitroHero3DWrap .fitro-hero-3d-canvas,
  .fitro-ref-hero #fitroHero3DWrap .fitro-hero-card-layer {
    display: none !important;
  }
}