/* Cyclone Hosting V5 - Hero Right Side Floating Labels
   Load AFTER your main hero CSS.
*/

.v5-image-engine{
    position:relative !important;
    overflow:visible !important;
}

.v5-image-engine .v5-card{
    position:absolute !important;
    z-index:10 !important;
    min-width:210px !important;
    padding:15px 18px !important;
    border-radius:18px !important;
    background:rgba(4,10,24,.82) !important;
    border:1px solid rgba(126,218,255,.20) !important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.35),
        0 0 26px rgba(19,223,255,.16) !important;
    backdrop-filter:blur(10px) !important;
}

.v5-image-engine .v5-card strong{
    display:block !important;
    color:#eaf7ff !important;
    font-size:16px !important;
    line-height:1.15 !important;
}

.v5-image-engine .v5-card small{
    display:block !important;
    margin-top:5px !important;
    color:#a9bdd5 !important;
    font-size:13px !important;
}

/* Right-side stacked labels */
.v5-image-engine .v5-card-security{
    top:22% !important;
    right:-8% !important;
    left:auto !important;
}

.v5-image-engine .v5-card-speed{
    top:44% !important;
    right:-14% !important;
    left:auto !important;
}

.v5-image-engine .v5-card-cloud{
    top:66% !important;
    right:-7% !important;
    left:auto !important;
}

/* Subtle floating motion */
.v5-image-engine .v5-card-security{
    animation:v5FloatLabelOne 4.4s ease-in-out infinite !important;
}

.v5-image-engine .v5-card-speed{
    animation:v5FloatLabelTwo 4.8s ease-in-out infinite !important;
}

.v5-image-engine .v5-card-cloud{
    animation:v5FloatLabelThree 5.2s ease-in-out infinite !important;
}

@keyframes v5FloatLabelOne{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

@keyframes v5FloatLabelTwo{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(7px)}
}

@keyframes v5FloatLabelThree{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
}

/* Keep labels readable on smaller screens */
@media(max-width:1100px){
    .v5-image-engine .v5-card{
        min-width:180px !important;
        padding:13px 15px !important;
    }

    .v5-image-engine .v5-card-security,
    .v5-image-engine .v5-card-speed,
    .v5-image-engine .v5-card-cloud{
        right:0 !important;
    }
}

@media(max-width:760px){
    .v5-image-engine .v5-card{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        margin:10px auto !important;
        width:min(280px,100%) !important;
        animation:none !important;
    }
}