body {
    font-family: 'Poppins', sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
}

nav {
    background-color: #031f29;
    /* height: 70px; */
    color: rgb(255, 255, 255);
    z-index: 99999999 !important;
}

.bg-1 {
    background-image: url("../../images/jv/bg1.jpg");
    background-position: top center;
    background-size: cover;
    background-color: #022b3e;
    overflow: hidden;
}

.bg-1-1 {
    background-image: url("../../images/jv/bg-1-1.jpg");
    background-position: top center;
    background-size: cover;
    background-color: #e6f7ff;
}

.bg-1-2 {
    background-image: url("../../images/jv/bg-1-2.jpg");
    background-position: top center;
    background-size: cover;
    background-color: #d5eef9;
}






.bg-demo {
    background-image: url("../../images/jv/bg-demo.png");
    background-size: cover !important;
    background-position: top center;
    background-color: rgb(4 44 69);
}


.bg-funnel-1 {
    /* background-image: url("../../images/jv/bg-funnel-1.png"); */
    background-position: top center;
    background-size: cover;
    background-color: white;
}



.bg-contest {
    background-image: url("../../images/jv/bg-contest.jpg");
    background-position: top center;
    background-size: cover;
    background-color: rgb(7 20 39);
}

.bg-8-2 {
    background-image: url("../../images/jv/bg-8-1.jpg");
    background-position: center;
    background-size: cover;
    background-color: #e2fbff;
}

nav li.nav-item {
    font-weight: 600;
    border-right: 1px solid white;
    height: 15px;
    display: flex;
    align-items: center;
}

nav a.nav-link {
    padding: 5px 23px !important;
    color: white !important;
}
/* nav li.nav-item::after{
    content: '';
    height: 15px;
    background: white;
} */
.txt-top-con h3 {
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-logo {
    width: 170px;
    margin-top: -12px;
}

.header-main-title {
    font-size: 3.5rem;
    font-weight: 800 !important;
    margin: 10px auto;
    margin-bottom: 40px !important;
    position: relative;
    margin-top: 30px;
    color: #ffffff;
}

@media (min-width:767px) {

    .fs-2 {
        font-size: 2.5rem !important;
        text-transform: uppercase;
    }
}

.fs-2 {
    text-transform: uppercase;
}

.sec-space {
    margin: 0px 0px;
    padding: 2rem 0px 2rem 0px;
    position: relative;
}

.heading {
    font-weight: 900;
    margin-bottom: 30px;
    font-size: 1.8rem;
    /* max-width: 700px; */
    text-align: center;
    color: #01435f;
    font-family: Oswald, sans-serif;
    /* margin: 0px auto; */
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800 !important;
}


@media (max-width:767px) {
    .fb-sec a, .sy-sec a, .mail-sec a {
        font-size: 1.3rem !important;
    }





    .header-main-title {
        font-size: 1.5rem;
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }



    .fs-2 {
        font-size: 1.8rem !important;
    }
}

@media (max-width:767px) {
    .header-main-title span:nth-child(2) {
        font-size: 1.5rem !important;
    }

    p.para-con-top {
        font-size: 1rem !important;
    }

    .fs-2 {
        font-size: 1.5rem !important;
    }
}


/* .profit-text:after{
    content: url(../../../images/jv/arrojv/jv/w2.png);
    position: absolute;
    right: 0;
    bottom: -52px;
}
.profit-text-right:after{
    content: url(../../../images/jv/arrojv/jv/w3.png);
    position: absolute;
    left: 0;
    bottom: -52px;
} */

.fs-3 {
    font-size: 3rem !important;
}

.fs-4 {
    font-size: 4rem !important;
}

p {
    font-weight: 500;
}

@media (max-width:767px) {

    .fs-1 {
        font-size: 1.2rem !important;
        line-height: 1.8rem;
    }
}


@media (max-width:992px) {

    .header-main-title {
        line-height: normal !important;
    }

    nav li.nav-item {
        height: auto;
        border-right: none;
    }

    nav a.nav-link {
        padding: 5px !important;
    }
}

@media (max-width:767px) {


    .btn-sub {
        padding: 8px 0px !important;
    }
}

/* .platform-sec{
    background-color: #0046a621;
} */

/* .customer-review{
    b
} */

footer {
    background-color: #031f29;
    color: white;
}

    footer a {
        color: white !important;
    }

    footer ul {
        margin: 0px;
        padding: 0px;
        color: white;
        list-style: none;
    }

        footer ul li {
            margin: 5px 0px;
        }

            footer ul li a {
                color: white;
                text-decoration: none;
                margin: 10px 0px;
                font-size: 1.1rem;
                font-weight: 500;
            }

    footer h2 {
        margin-bottom: 14px;
        font-weight: 600;
    }

@media (max-width:425px) {

    .footer-link {
        width: 295px !important;
        text-align: center;
    }
}

footer a {
    text-decoration: none;
}

    footer a i {
        font-size: 1.1rem !important;
    }

.footer-link {
    max-width: 380px;
    text-align: center;
}

.footer-logo img {
    width: 200px;
    margin-top: 25px;
}

.flex-md-column-reverse {
    flex-direction: row !important;
}

.fa-check-circle {
    font-size: 25px;
}

@media (max-width:767px) {

    .flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

    .sec-space {
        margin: 0px 0px;
        padding: 1.5rem 0px;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }
}

@media (max-width:767px) {


    .heading {
        font-weight: 800;
        margin-bottom: 30px;
        font-size: 1.4rem;
        /* max-width: 700px; */
        text-align: center;
        /* margin: 0px auto; */
    }
}

.fw-500 {
    font-weight: 500 !important;
}

p.para-con-top {
    font-size: 1.3rem;
    font-weight: 400;
}

.fs-25 {
    font-size: 2.5rem;
    letter-spacing: -2px;
}

.text-dark {
    color: #000 !important;
}

.support-ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    font-weight: 600;
}

    .support-ul li {
        float: left;
        width: 12.5%;
    }

        .support-ul li img {
            width: 80px;
            flex-shrink: 0;
        }

.support-title {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 5px;
}

@media (max-width:1024px) {
    .support-ul li {
        float: left;
        width: 20%;
    }
}

@media (max-width: 767px) {
    .support-ul li {
        float: left;
        width: 25%;
    }

    .fs-25 {
        font-size: 1.6rem;
    }
}

@media (max-width: 425px) {
    .support-ul li {
        float: left;
        width: 50%;
    }
}

.videobox {
    position: relative;
    margin: 0 0 20px;
}

.responsive-video {
    position: relative;
    padding-bottom: 56%;
    overflow: hidden;
    border: #8e8e8e solid 2px;
    border-radius: 22px;
}

    .responsive-video.top {
        border: 6px solid #0b8086 !important;
        border-radius: 22px !important;
        /* background: linear-gradient(90deg, #0b8086, #00d4d4, #7affff, #00d4d4, #0b8086); */
        background-size: 300% 100%;
        animation: videoBorderAnimation 4s linear infinite;
        box-shadow: 0 0 18px rgba(20, 184, 166, 0.45), 0 0 40px rgba(6, 182, 212, 0.25);
    }

@keyframes videoBorderAnimation {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-400 {
    font-weight: 400;
}
/* The Modal (background) */

/* Modal Content */

/* The Close Button */

/* Next & previous buttons */



/* Position the "next button" to the right */


/* On hover, add a black background color with a little bit see-through */



/* Number text (1/3 etc) */





.active,
.demo:hover {
    opacity: 1;
}









.text-theme {
    color: #0494a5;
}

.text-theme-1 {
    color: #00ceb2;
}

.bg-5 {
    background: #091221;
}





.support-ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-weight: 400;
    font-size: 1.2rem;
    display: contents;
}

    .support-ul li {
        float: left;
        width: 31.3%;
        margin: 0px 1%;
        display: flex;
        align-items: flex-start;
        padding: 20px 20px !important;
        gap: 0px;
        font-weight: 600;
        /* flex-direction: column; */
        align-items: center;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        color: rgb(255 255 255);
        height: 100%;
        background: transparent;
        gap: 20px;
        border: 1px solid #cbcbcb;
    }

        .support-ul li div {
            color: #040404;
            font-weight: 400;
            font-size: 1.3rem;
        }

        .support-ul li i {
            font-size: 50px;
            color: #17b102;
        }

@media (max-width:1023px) {
    .support-ul li {
        float: left;
        width: 48%;
        display: flex;
        align-items: center;
        padding: 10px;
        gap: 15px;
        margin-bottom: 15px;
    }
}

@media (max-width:767px) {
    .support-ul li {
        float: left;
        width: 99%;
        display: flex;
        align-items: center;
        padding: 10px;
        gap: 15px;
    }
}



@media (max-width:767px) {
    .con-img {
        max-width: 350px;
    }
}

.surprise-left img {
    width: 100px;
    max-width: 100%;
    flex-shrink: 0;
}

.surprise-sec {
    padding: 10px 20px;
    border-radius: 10px;
    color: #1f1f1f;
    background-position: top center;
}

.surprise-sec-1 {
    padding: 40px 40px;
    border-radius: 30px;
    color: #e5e5e5;
    background-position: top center;
    background: #082227ad;
    border: 1px solid #04686a;
}

.text-green {
    color: #0cf0b2;
}

.surprise-sec h4 {
    color: white;
    display: inline-block;
    font-weight: 900;
}


@media (max-width:767px) {
    .buyers-banner p {
        line-height: auto !important;
    }

    body .fs-3 {
        font-size: 1.6rem !important;
    }

    body .fs-4 {
        font-size: 1.9rem !important;
    }
}






/* The Modal (background) */

/* Modal Content */

/* The Close Button */

/* Next & previous buttons */



/* Position the "next button" to the right */


/* On hover, add a black background color with a little bit see-through */



/* Number text (1/3 etc) */





.active,
.demo:hover {
    opacity: 1;
}






@media (max-width:1400px) {
    .watch-img {
        width: 450px;
        max-width: 100%;
        display: inline-block !important;
    }

    .watch-img-1 {
        display: none !important;
    }
}

.watch-img {
    display: none;
}

.watch-img-1 {
    width: 180px;
    max-width: 100%;
    position: absolute;
    right: -164px;
    top: -84px;
    display: inline-block;
}

@media (max-width:767px) {

    body .btn-watch {
        font-size: 1.3rem !important;
        padding: 15px 10px !important;
    }
}

@media (max-width:992px) {
    .con-sec {
        position: relative !important;
        top: 0px !important;
        left: 0px !important;
        flex-wrap: wrap;
    }
}












.surprise-sec.star-sec {
    border: 2px solid #b2e4ef !important;
    margin-top: 0px !important;
    border-radius: 50px;
    padding: 30px 50px 30px 50px !important;
    position: relative;
    background: #c3f5f6;
    background-position: top center;
    background-size: cover;
}

@media (max-width:992px) {

    .surprise-sec.star-sec {
        padding: 20px !important;
    }
}

.img-pos {
    position: relative;
    top: 0px;
    margin-left: 5px;
}




.btn-watch {
    color: rgb(255 255 255) !important;
    border-radius: 10px;
    font-size: 1.7rem;
    margin: 5px 0px;
    padding: 15px 15px !important;
    font-weight: 400;
    border: 0px solid;
    background: black;
    font-weight: 600;
    border-radius: 150px;
}

    .btn-watch.sale {
        box-shadow: none;
        background: #0891b1;
        background: linear-gradient(90deg, #006881 0%, #27a9b6 100%);
    }

    .btn-watch:hover {
        background: linear-gradient(90deg, #015165 0%, #1f8992 100%);
    }

@media (max-width:767px) {
    .start-5 {
        padding: 20px !important;
    }



    .support-ul li div {
        font-size: 1.1rem !important;
    }
}








.row-high-4 {
    background-size: cover;
    background-color: #002238;
    padding: 40px 40px;
    color: #b3c9de;
    border-radius: 30px;
    margin-bottom: 20px;
    height: calc(100% - 20px);
    border: 1px solid rgb(215 235 239);
    background: white;
    box-shadow: 0px 0px 9px 3px #aeb3b336;
}

    .row-high-4 .para-con-top {
        color: #f0f8ffd9;
    }





@media (max-width:1200px) {
    .con-sec {
        bottom: 20px !important;
        left: 150px !important;
    }
}


@media (max-width: 992px) {
    .con-sec {
        bottom: 0px !important;
        left: 0px !important;
    }

    .img-set {
        width: 450px !important;
        position: relative;
        margin: 0px auto;
        margin-bottom: 20px !important;
        right: 0px !important;
    }
}

.theme-high {
    display: inline-block;
    background: #0088aa;
    border-radius: 10px;
    padding: 0px 10px;
    color: white;
}








.speed-control {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgb(1 16 5);
    color: white;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 10;
    display: none;
}

.responsive-video:hover .speed-control {
    display: block;
}

.speed-control select {
    width: 75px !important;
    background: rgb(0 0 0 / 43%); /* faded black */
    color: white;
    border: none;
    font-size: 14px;
    padding: 6px 30px 6px 10px;
    border-radius: 4px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='white' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
    width: 63px;
}

    .speed-control select:focus {
        outline: none;
    }






.demo-img {
    width: 240px;
}

@media (max-width:767px) {
    .demo-img {
        width: 140px !important;
    }
}




.top-sec-con {
    display: flex;
    gap: 10px;
    align-items: center;
}



.top-sec-top {
    font-size: 2rem;
    font-weight: 600;
    color: black;
    display: table;
    border-radius: 10px;
    position: relative;
}

.top-sec-top-des {
    margin-top: 15px;
    font-size: 1.4em;
    font-weight: 500;
}

@media (max-width:767px) {
    .top-sec-top {
        font-size: 1.2rem !important;
    }

    .top-sec-top-des {
        font-size: 1rem !important;
    }
}

.txt-theme {
    color: #00a1bd;
}









.row-high-ex-2 {
    /* background-image: url("../../images/jv/bjv/g6.jpg"); */
    background-position: top center;
    background-size: cover;
    background-color: white;
}



.header-main-title span:nth-child(2) {
    font-size: 3.5rem;
    display: inline-block;
    background: #005e76;
    padding: 2px 20px;
    border-radius: 10px;
    position: relative;
    margin: 10px 0px;
    rotate: 359.5deg;
}

span.hero-top {
    max-width: 100%;
    width: 1100px;
    display: inline-block;
}

.txt-top-con {
    margin-top: 20px;
    background: #156b86d6;
    display: inline-flex !important;
    width: auto;
    padding: 20px;
    border-radius: 150px;
    border: 1px solid #12667a;
}

.header-main-title span.high {
    color: #01bddb;
}

@media (max-width:767px) {
    .img-ecart, .img-local {
        display: none;
    }

    .txt-top-con {
        margin-top: 10px;
        background: #156b86d6;
        display: inline-flex !important;
        width: auto;
        padding: 20px;
        border-radius: 150px;
        border: 1px solid #12667a;
    }

    .txt-pre {
        font-size: 34px !important;
    }
}





@media (max-width:767px) {

    .fes-con-1 {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width:500px) {

    .fes-con-1 {
        grid-template-columns: 1fr !important;
    }
}



.img-set {
    width: 350px;
    max-width: 100%;
}


















@media (max-width:767px) {

    .product-con {
        font-size: 1.3rem !important;
    }
}

.product-con {
    font-size: 1.5rem;
    background: #00b9d754;
    border: 1px solid #faf4fd;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 4px solid #00d9ff;
}

.product-score {
    color: #006577;
    font-weight: 800;
}

.product-title {
    color: #003039;
    margin-bottom: 6px;
    font-weight: 500;
}


.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
}

    .animate-fade-in-up.show {
        animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.reveal-on-scroll {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    .reveal-on-scroll.active {
        opacity: 1;
        transform: translateY(0);
    }

[class*="reveal-on-scroll-"] {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[class*=" reveal-on-scroll-"].active {
    opacity: 1;
    transform: translateY(0);
}






.start-5 {
    box-shadow: 11px 11px 0px #fefeff;
    border: 0px solid #1F1F1F;
    border-radius: 40px;
    text-align: center;
    padding: 40px;
    background: rgb(255 255 255);
}













@media (max-width:767px) {

    .order-bump-wrap {
        padding: 20px;
        grid-template-columns: 1fr 1fr;
    }

    .hero-bottom-title {
        font-size: 1.2rem !important;
    }
}

@media (max-width:500px) {
    .order-bump-wrap {
        padding: 20px;
        grid-template-columns: 1fr;
    }
}








.bg-ui {
    line-height: 2.2rem;
}


















.surprise-sec-con {
    background: #00a1bd0d;
    border-radius: 20px;
    padding: 20px;
}



@media (max-width:767px) {

    img.star1 {
        display: none;
    }
}



.blink-star {
    font-size: 50px;
    color: #fff;
    display: inline-block;
    text-shadow: 0 0 6px #fff;
    animation: blinkStar 4s infinite ease-in-out;
    position: absolute;
    top: 10%;
    left: 10%;
    rotate: 347deg;
}

.blink-star-2 {
    font-size: 50px;
    color: #02c9d3;
    display: inline-block;
    /* text-shadow: 0 0 6px #fff; */
    animation: blinkStar1 4s infinite ease-in-out;
    position: absolute;
    bottom: 30%;
    left: 8%;
    rotate: 347deg;
}

.blink-star-3 {
    font-size: 60px;
    color: #0088aa;
    display: inline-block;
    animation: blinkStar3 7s infinite ease-in-out;
    position: absolute;
    top: 30%;
    right: 12%;
    rotate: 13deg;
}

.img-local {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 70px;
    animation: ecartPremium 5s ease-in-out infinite;
    transform-origin: center center;
}

.shop1-img {
    position: absolute;
    top: 35%;
    right: -80px;
    width: 300px;
    animation: ecartFadeOnce 2s ease-in-out;
}

.shop2-img {
    position: absolute;
    top: 15%;
    left: -100px;
    width: 300px;
    animation: ecartFadeOnce 2s ease-in-out;
}

.img-ecart {
    position: absolute;
    top: 30%;
    left: 12%;
    width: 70px;
    animation: ecartPremium 5s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes ecartFadeOnce {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ecartPremium {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    30% {
        transform: translateY(-7px) rotate(1deg) scale(1.015);
    }

    60% {
        transform: translateY(3px) rotate(-1deg) scale(1.025);
    }

    80% {
        transform: translateY(-3px) rotate(0.5deg) scale(1.01);
    }
}

@keyframes blinkStar {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.2;
        transform: scale(0.6);
    }
}

@keyframes blinkStar1 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        /* text-shadow: 0 0 6px #fff; */
    }

    50% {
        opacity: 0.2;
        transform: scale(0.6);
        /* text-shadow: 0 0 1px #fff; */
    }
}

@keyframes blinkStar3 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.2;
        transform: scale(0.8);
    }
}



.buyers-banner {
    width: 100%;
    max-width: 892px;
    margin: 40px auto 0;
    padding: 25px 24px;
    background: rgb(18 17 28 / 68%);
    border: 1px solid #005d7c;
    border-radius: 35px;
    /* backdrop-filter: blur(4px); */
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 2rem;
    animation: buyersGlowFloat 5.8s ease-in-out infinite;
}

@keyframes buyersGlowFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

    100% {
        transform: translateY(0);
    }
}
/* Top glowing line */
.buyers-banner::before {
    content: "";
    position: absolute;
    left: -80px;
    right: -80px;
    top: 0;
    height: 1px;
    background: linear-gradient( to right, transparent, rgba(34, 211, 238, 0.6), transparent );
}

.buyers-banner p {
    margin: 0;
    color: #e5e7eb;
    font-size: 2rem;
    font-weight: 500;
    line-height: 2.7rem;
}

/* Shimmer text */
.brand-shimmer {
    display: inline-block;
    font-weight: 600;
    background: linear-gradient( 90deg, #e2e8f0 0%, #38bdf8 50%, #e2e8f0 100% );
    background-size: 200% auto;
    background-position: 0 center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 4s linear infinite;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

/* Different animation timing */
.delay-1 {
    animation-delay: 0.8s;
}

.delay-2 {
    animation-delay: 1.6s;
}

.delay-3 {
    animation-delay: 2.4s;
}

.delay-4 {
    animation-delay: 3.2s;
}

/* Mobile */
@media (max-width: 639px) {
    .buyers-banner {
        margin-top: 32px;
        padding: 20px 18px;
    }

        .buyers-banner p {
            font-size: 16px;
        }
}







/* Continuous subtle floating of entire group */
.container-motion {
    animation: gentleWobble 4s ease-in-out infinite;
    transform-origin: 140px 140px;
}

/* Hand-written Text shimmer & stroke glow */
.hand-text {
    font-family: 'Caveat', 'Comic Sans MS', cursive, sans-serif;
    font-weight: 700;
    font-style: italic;
    fill: #f5fcff;
    stroke: #00d2ff;
    stroke-width: 0.8px;
    letter-spacing: 2px;
    paint-order: stroke fill;
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.45));
    animation: textPulse 3s ease-in-out infinite alternate;
}

/* Outer Play Pulse Rings */
.play-pulse-ring {
    transform-origin: 82px 108px;
    animation: ringExpand 2s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}

.play-pulse-ring-delayed {
    transform-origin: 82px 108px;
    animation: ringExpand 2s cubic-bezier(0.2, 0.8, 0.3, 1) infinite 0.75s;
}

/* Rotating / Pulsing Play Button */
.play-btn-circle {
    transform-origin: 82px 108px;
    animation: buttonBreathe 2s ease-in-out infinite;
}

.play-triangle {
    transform-origin: 83px 108px;
    animation: playArrowTap 1.2s ease-in-out infinite alternate;
}

/* Animated Curving Arrow: Drawing dash & bounce */
.curved-arrow-path {
    stroke-dasharray: 180;
    stroke-dashoffset: 0;
    animation: arrowDrawFlow 2.8s ease-in-out infinite;
}

.arrow-group {
    transform-origin: 145px 210px;
    animation: arrowBounce 1.4s ease-in-out infinite alternate;
}

/* Keyframes */
@keyframes gentleWobble {
    0%, 100% {
        transform: translateY(0px) rotate(-1deg);
    }

    50% {
        transform: translateY(-6px) rotate(1.5deg);
    }
}

@keyframes textPulse {
    0% {
        filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.3));
        opacity: 0.92;
    }

    100% {
        filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.85)) drop-shadow(0 0 18px rgba(0, 180, 255, 0.4));
        opacity: 1;
    }
}

@keyframes ringExpand {
    0% {
        transform: scale(0.85);
        opacity: 0.85;
    }

    80%, 100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

@keyframes buttonBreathe {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px #00f3ff);
    }

    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 14px #00f3ff);
    }
}

@keyframes playArrowTap {
    0% {
        transform: translateX(-1px) scale(0.96);
    }

    100% {
        transform: translateX(2px) scale(1.08);
    }
}

@keyframes arrowBounce {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(8px) scale(1.03);
    }
}

@keyframes arrowDrawFlow {
    0% {
        stroke-dashoffset: 180;
        opacity: 0.3;
    }

    50% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    80%, 100% {
        stroke-dashoffset: 0;
        opacity: 0.9;
    }
}

/* .sec-space {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.sec-space.show {
    opacity: 1;
} */






/* Styles moved from index.html */


.hero-top {
    display: block;
    opacity: 0;
    transform: scale(0.5);
    animation: heroTopZoom 1s ease-out forwards;
    margin: 0 auto;
}

@keyframes heroTopZoom {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    60% {
        opacity: 1;
        transform: scale(1.15);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================
            CARDS GRID
            ========================= */

/* =========================
            CARD WRAPPER
            ========================= */
.card-wrapper {
    position: relative;
    perspective: 1200px;
}

.card-wrapper-1 {
    animation: cardPopIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.card-wrapper-2 {
    animation: cardPopIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

/* =========================
            CARD HALO
            ========================= */
.card-halo {
    position: absolute;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    border-radius: 40px;
    filter: blur(32px);
    pointer-events: none;
    z-index: -1;
}

.halo-flare-1 {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(125, 211, 252, 0.30), rgba(192, 132, 252, 0.25));
    animation: haloBloom 1.2s ease-out 0.25s both;
}

.halo-flare-2 {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.25), rgba(125, 211, 252, 0.30), rgba(45, 212, 191, 0.25));
    animation: haloBloom 1.2s ease-out 0.45s both;
}

/* =========================
            CARD BORDER
            ========================= */
.luxury-card-border {
    position: relative;
    padding: 1.5px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(186, 230, 253, 0.8), rgba(243, 232, 255, 0.8), rgba(255, 255, 255, 0.95));
    background-size: 300% 300%;
    box-shadow: 0 20px 40px -15px rgba(13, 85, 126, 0.12), 0 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: background-position 0.5s ease, box-shadow 0.5s ease, transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

    .luxury-card-border:hover {
        background-position: 100% 100%;
        box-shadow: 0 28px 65px -14px rgba(14, 165, 233, 0.22), 0 14px 35px -10px rgba(168, 85, 247, 0.2), 0 0 0 1.5px rgba(56, 189, 248, 0.45);
    }

/* =========================
            CARD
            ========================= */
.feature-card {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 23px;
    padding: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform-style: preserve-3d;
}

/* =========================
            CARD SHEEN
            ========================= */
.card-sheen-sweep {
    position: absolute;
    top: -60%;
    left: -60%;
    width: 60%;
    height: 220%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
    animation: cardSheenSweep 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: 25;
}

/* =========================
            IMAGE
            ========================= */
.image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 16px;
    background: #f1f5f9;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .image-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease-out;
    }

.feature-card:hover .image-frame img {
    transform: scale(1.05);
}

/* =========================
            IMAGE SHINE
            ========================= */
.image-shine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

    .image-shine::after {
        content: "";
        position: absolute;
        top: 0;
        left: -25%;
        width: 160%;
        height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform: translateX(0);
        transition: transform 1s ease;
    }

.feature-card:hover .image-shine::after {
    transform: translateX(100%);
}

/* =========================
            IMAGE OVERLAY
            ========================= */
.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.feature-card:hover .image-overlay {
    opacity: 1;
}

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

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

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

@keyframes cardPopIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.94);
    }

    70% {
        transform: translateY(-6px) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes haloBloom {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    60% {
        opacity: 0.9;
        transform: scale(1.15);
    }

    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

@keyframes cardSheenSweep {

    0%, 20% {
        transform: translateX(-140%) rotate(25deg);
    }

    50%, 100% {
        transform: translateX(260%) rotate(25deg);
    }
}

@keyframes pulseGlow {

    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(157, 50, 181, 0.4));
    }

    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 10px rgba(157, 50, 181, 0.7));
    }
}

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

@media (max-width: 767px) {

    .hero-header {
        margin-bottom: 36px;
    }

    .feature-card {
        padding: 20px;
    }

    .ambient-orb {
        width: 250px;
        height: 250px;
    }
}

/* =========================
            REDUCED MOTION
            ========================= */
article[data-purpose] {
    opacity: 0;
    transform: translateY(100px) scale(0.80);
}

    article[data-purpose].card-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: opacity 0.9s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    }



/* Initial state - animation se pehle */

/* Jab section viewport mein aaye */



/* =========================
    TECHNOLOGY
    ========================= */
.technology-content {
    text-align: center;
}

.technology-title {
    margin: 0 0 12px;
    font-family: 'Anton', 'Montserrat', Impact, sans-serif;
    font-size: clamp(42px, 5vw, 65px);
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    filter: blur(6px);
    color: #00b4d8;
    text-shadow: 0 0 12px rgba(0, 180, 216, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: text-shadow 0.25s ease;
}

/* =========================
    SUB TITLE
    ========================= */
.support-title {
    margin: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #000;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
}

/* =========================
    PRIZE
    ========================= */
.prize-content {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

/* =========================
    $5,000
    ========================= */
.prize-amount {
    font-family: 'Anton', sans-serif;
    font-size: clamp(55px, 6vw, 85px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    background: linear-gradient(90deg, #d97706 0%, #facc15 25%, #fef08a 50%, #f59e0b 75%, #d97706 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================
    PRIZE LABEL
    ========================= */
.prize-label {
    margin-top: 8px;
    font-family: 'Anton', sans-serif;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    color: #000;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
}

/* =========================
    WHEN SECTION IS ACTIVE
    ========================= */
.text-feature.active .technology-title {
    animation: technologyReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.text-feature.active .support-title {
    animation: subtitleReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.text-feature.active .prize-content {
    animation: prizeContainerReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.text-feature.active .prize-amount {
    animation: prizePop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards, goldShine 4.5s linear 1.35s infinite;
}

.text-feature.active .prize-label {
    animation: subtitleReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

/* =========================
    ANIMATIONS
    ========================= */
@keyframes technologyReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.85);
        letter-spacing: 0.08em;
        filter: blur(6px);
    }

    60% {
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        letter-spacing: 0.03em;
        filter: blur(0);
    }
}

@keyframes subtitleReveal {
    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes prizePop {
    0% {
        opacity: 0;
        transform: scale(0.65) translateY(15px);
    }

    60% {
        opacity: 1;
        transform: scale(1.08) translateY(-3px);
    }

    80% {
        transform: scale(0.97) translateY(1px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes prizeContainerReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes goldShine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* =========================
    MOBILE
    ========================= */
@media (max-width: 767px) {
    .technology-content {
        text-align: center;
    }

    .technology-title {
        font-size: 42px;
    }

    .support-title {
        margin-left: auto;
        margin-right: auto;
        font-size: 21px;
    }

    .prize-amount {
        font-size: 60px;
    }

    .prize-label {
        font-size: 32px;
    }
}



/* Ambient Sales Page Context Wrapper */

/* Subtle calendar watermark pattern background as seen in the image */


/* Watermark calendar dates background overlay */




/* Section Header */






/* Cards Common Styling */
.launch-card {
    position: relative;
    border-radius: 26px;
    padding: 28px 24px 34px;
    color: #ffffff;
    height: 100%;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    cursor: default;
}

    .launch-card:hover {
        transform: translateY(-8px) scale(1.02);
    }

/* Watermark inside cards (calendar numbers faded in card backgrounds) */






/* Individual Card Themes */
/* 1. START CARD */




/* 2. ENDS CARD */




/* 3. PRELAUNCH WEBINAR CARD */




/* Badges Inside Cards */




/* Date Typography */


/* Time Badges */


/* Icon graphics container */


/* Floating Keyframe Animations */
@keyframes floatGentle {

    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-9px) rotate(1.5deg);
    }
}

@keyframes rocketThrust {

    0%, 100% {
        transform: translateY(0px) rotate(-38deg);
    }

    50% {
        transform: translateY(-11px) rotate(-35deg) scale(1.03);
    }
}

@keyframes pulseGlow {

    0%, 100% {
        opacity: 0.45;
        transform: scale(1);
    }

    50% {
        opacity: 0.75;
        transform: scale(1.15);
    }
}







/* Scroll-Triggered Reveal Animations */




/* When visible in viewport */








/* Prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {

    .reveal-header,
    .reveal-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Dummy section spacing for scrolling demo */



/* =========================================================
            PAGE
            ========================================================= */
.affiliate-page {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #030712;
}

/* =========================================================
            BACKGROUND
            ========================================================= */
.background-effects {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    top: 0px;
}

.bg-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.4;
}

.bg-radial-top {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(14, 165, 233, 0.18), rgba(3, 7, 18, 0));
}

.bg-radial-bottom {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 120%, rgba(99, 102, 241, 0.15), rgba(3, 7, 18, 0));
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(110px);
}

.orb-main {
    top: 25%;
    left: 50%;
    width: 700px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.15), rgba(59, 130, 246, 0.20), rgba(147, 51, 234, 0.15));
    animation: orbFloatSlow 14s ease-in-out infinite;
}

.orb-left {
    top: 33%;
    left: 40px;
    width: 384px;
    height: 384px;
    background: rgba(6, 182, 212, 0.10);
    animation: orbFloatFast 10s ease-in-out infinite;
}

.orb-right {
    right: 40px;
    bottom: 40px;
    width: 480px;
    height: 480px;
    background: rgba(79, 70, 229, 0.15);
    filter: blur(130px);
    animation: orbFloatSlow 14s ease-in-out infinite;
}

/* =========================================================
            MAIN CONTENT
            ========================================================= */
.affiliate-main {
    position: relative;
    z-index: 10;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================================
            HEADER
            ========================================================= */
.section-header {
    width: 100%;
    text-align: center;
    margin-bottom: 44px;
}

.main-title {
    font-family: "Outfit", sans-serif;
    color: #ffffff;
    font-size: 60px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.cyan-text {
    display: inline-block;
    color: #00f0ff;
    animation: textGlow 3.5s ease-in-out infinite;
}

.zigzag {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}

    .zigzag svg {
        width: 80px;
        height: 16px;
        color: #00f0ff;
        filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.85));
    }

/* =========================================================
            FORM
            ========================================================= */
.signup-section {
    max-width: 100%;
    width: 1050px;
    margin-bottom: 36px;
}

.glass-input:focus {
    color: white;
}

.signup-form {
    width: 100%;
    display: grid;
    grid-template-columns: 5fr 5fr 2fr;
    gap: 16px;
    align-items: center;
}

.input-wrapper {
    position: relative;
    transition: transform 0.3s ease;
}

    .input-wrapper:focus-within {
        transform: translateY(-2px);
    }

.input-icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #94a3b8;
    transition: color 0.2s ease, filter 0.2s ease;
}

.input-wrapper:focus-within .input-icon {
    color: #00f0ff;
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.7));
}

.input-icon svg {
    width: 20px;
    height: 20px;
}

.glass-input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 1.5px solid rgba(0, 240, 255, 0.20);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(13, 27, 49, 0.85) 0%, rgba(8, 17, 32, 0.95) 100%);
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 500;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

    .glass-input::placeholder {
        color: #94a3b8;
    }

    .glass-input:focus {
        border-color: #00f0ff;
        background: linear-gradient(180deg, rgba(17, 34, 62, 0.95) 0%, rgba(10, 22, 42, 0.98) 100%);
        box-shadow: 0 0 22px rgba(0, 240, 255, 0.3), inset 0 1px 2px rgba(0, 240, 255, 0.15);
    }

/* =========================================================
            BUTTON
            ========================================================= */
.signup-button {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 57px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(90deg, #00d2ff, #00f0ff);
    color: #0f172a;
    font-family: "Outfit", sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 30px -4px rgba(0, 240, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

    .signup-button:hover {
        transform: translateY(-2px);
        background: linear-gradient(90deg, #00f0ff, #38bdf8);
        box-shadow: 0 0 35px 2px rgba(0, 240, 255, 0.45);
    }

    .signup-button:active {
        transform: translateY(0);
    }

    .signup-button:disabled {
        cursor: not-allowed;
        opacity: 0.85;
    }

.button-text {
    position: relative;
    z-index: 2;
}

/* =========================================================
            FORM FEEDBACK
            ========================================================= */
.form-feedback {
    display: none;
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(6, 78, 59, 0.60);
    border: 1px solid rgba(16, 185, 129, 0.40);
    color: #6ee7b7;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
    backdrop-filter: blur(10px);
}

    .form-feedback.show {
        display: block;
    }

/* =========================================================
            COMMISSION BADGE
            ========================================================= */
.commission-wrapper {
    position: relative;
    z-index: 20;
    margin-bottom: 24px;
}

.commission-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 48px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(253, 230, 138, 0.50);
    background: linear-gradient(90deg, #ffb800, #ff6a00, #ff4500);
    color: #0f172a;
    font-family: "Outfit", sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: 0 10px 35px -3px rgba(255, 110, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    user-select: none;
    animation: subtlePulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transition: transform 0.3s ease;
}

    .commission-badge:hover {
        transform: scale(1.05);
    }

.commission-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .commission-content svg {
        width: 20px;
        height: 20px;
    }

.shimmer-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: shimmerMove 3.2s infinite ease-in-out;
    pointer-events: none;
}

/* =========================================================
            GLASS CARD
            ========================================================= */
.jvzoo-card {
    position: relative;
    width: 100%;
    max-width: 768px;
    padding: 48px 40px 40px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(0, 240, 255, 0.20);
    background: linear-gradient(135deg, rgba(12, 22, 43, 0.82) 0%, rgba(6, 13, 27, 0.92) 100%);
    box-shadow: 0 25px 60px -15px rgba(2, 6, 23, 0.85), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

    .jvzoo-card:hover {
        border-color: rgba(34, 211, 238, 0.40);
        box-shadow: 0 0 50px -10px rgba(0, 180, 255, 0.18), 0 25px 60px -15px rgba(2, 6, 23, 0.85);
    }

.card-orb {
    position: absolute;
    width: 288px;
    height: 288px;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
    transition: background 0.5s ease;
}

.card-orb-right {
    right: -64px;
    bottom: -64px;
    background: rgba(34, 211, 238, 0.15);
}

.jvzoo-card:hover .card-orb-right {
    background: rgba(34, 211, 238, 0.25);
}

.card-orb-left {
    left: -64px;
    top: -64px;
    background: rgba(37, 99, 235, 0.20);
}

.jvzoo-card:hover .card-orb-left {
    background: rgba(37, 99, 235, 0.30);
}

.card-top-line {
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.40), transparent);
}

/* =========================================================
            CARD CONTENT
            ========================================================= */
.card-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.brand-area {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.brand-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 16px rgba(0, 240, 255, 0.45));
    transition: transform 0.3s ease;
}

.jvzoo-card:hover .brand-logo {
    transform: scale(1.05);
}

.brand-logo svg {
    width: 100%;
    height: 100%;
}

.brand-info {
    display: flex;
    flex-direction: column;
}

.brand-name {
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.get-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}

    .get-link:hover {
        color: #67e8f9;
    }

    .get-link svg {
        width: 16px;
        height: 16px;
        color: #22d3ee;
        transition: transform 0.2s ease;
    }

    .get-link:hover svg {
        transform: translateX(4px);
    }

/* =========================================================
            JVZOO BUTTON
            ========================================================= */
.jvzoo-button-wrapper {
    width: 100%;
    max-width: 384px;
}

.jvzoo-button {
    text-decoration: none;
    position: relative;
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, #00bfe6, #00f0ff, #00d0f5);
    color: #0f172a;
    font-family: "Outfit", sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 35px -4px rgba(0, 240, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

    .jvzoo-button:hover {
        transform: translateY(-4px);
        background: linear-gradient(90deg, #00cbf5, #38bdf8);
        box-shadow: 0 12px 45px 0 rgba(0, 240, 255, 0.7);
    }

    .jvzoo-button:active {
        transform: translateY(0);
    }

    .jvzoo-button svg {
        position: relative;
        z-index: 2;
        width: 20px;
        height: 20px;
        transition: transform 0.2s ease;
    }

    .jvzoo-button:hover svg {
        transform: translateX(4px);
    }

    .jvzoo-button span {
        position: relative;
        z-index: 2;
    }

/* =========================================================
            TRUST POINTS
            ========================================================= */

/* =========================================================
            ANIMATIONS
            ========================================================= */
@keyframes subtlePulse {

    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 35px -3px rgba(255, 110, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    }

    50% {
        transform: scale(1.025);
        box-shadow: 0 14px 45px 0 rgba(255, 120, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.7);
    }
}

@keyframes shimmerMove {
    0% {
        transform: translateX(-180%);
    }

    100% {
        transform: translateX(180%);
    }
}

@keyframes orbFloatSlow {

    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-25px, 20px) scale(1.08);
    }
}

@keyframes orbFloatFast {

    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -25px) scale(1.12);
    }
}

@keyframes textGlow {

    0%, 100% {
        text-shadow: 0 0 18px rgba(0, 240, 255, 0.6), 0 0 35px rgba(0, 240, 255, 0.3);
    }

    50% {
        text-shadow: 0 0 28px rgba(0, 240, 255, 0.9), 0 0 55px rgba(0, 240, 255, 0.5);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



/* =========================================================
            RESPONSIVE
            ========================================================= */
@media (max-width: 900px) {
    .main-title {
        font-size: 52px;
    }

    .card-main {
        flex-direction: column;
        align-items: center;
    }

    .brand-area {
        text-align: center;
    }

    .brand-info {
        align-items: center;
    }

    .jvzoo-button-wrapper {
        max-width: 500px;
    }
}

@media (max-width: 767px) {
    .affiliate-page {
        padding: 48px 16px;
    }

    .main-title {
        font-size: 42px;
        line-height: 1.05;
    }

    .signup-form {
        grid-template-columns: 1fr;
    }

    .signup-button {
        min-height: 56px;
    }

    .commission-badge {
        padding: 13px 28px;
        font-size: 17px;
    }

    .jvzoo-card {
        padding: 40px 24px 28px;
    }

    .brand-area {
        flex-direction: column;
    }

    .brand-logo {
        width: 72px;
        height: 72px;
    }

    .brand-name {
        font-size: 27px;
    }

    .get-link {
        justify-content: center;
        font-size: 14px;
    }

    .jvzoo-button {
        min-height: 62px;
        padding: 15px 20px;
        font-size: 15px;
    }

    .orb-main {
        width: 500px;
        height: 300px;
    }

    .orb-left {
        left: -100px;
    }

    .orb-right {
        right: -100px;
    }
}

@media (max-width: 480px) {
    .affiliate-page {
        padding: 36px 14px;
    }

    .main-title {
        font-size: 34px;
    }

    .section-header {
        margin-bottom: 34px;
    }

    .commission-badge {
        width: 100%;
        padding: 13px 15px;
        font-size: 15px;
    }

    .commission-content {
        gap: 7px;
    }

        .commission-content svg {
            width: 17px;
            height: 17px;
        }

    .jvzoo-card {
        padding: 34px 18px 24px;
        border-radius: 20px;
    }

    .brand-name {
        font-size: 24px;
    }

    .jvzoo-button {
        font-size: 13px;
        letter-spacing: 0.05em;
    }

    .card-top-line {
        left: 20px;
        right: 20px;
    }
}




/* =========================================
           MAIN BACKGROUND
        ========================================= */


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





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




/* =========================================
           TYPOGRAPHY
        ========================================= */












/* =========================================
           DECORATIVE UNDERLINE
        ========================================= */






/* =========================================
           GRAPHIC SHOWCASE
        ========================================= */


/* =========================================
           GLOW
        ========================================= */




/* =========================================
           GLASS CARD
        ========================================= */






/* =========================================
           IMAGE WRAPPER
        ========================================= */








/* =========================================
           FLOAT ANIMATION
        ========================================= */

@keyframes subtleFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================
           EDITORIAL CONTENT
        ========================================= */

.sales-copy-body {
    width: 100%;
    margin: 0 auto;
    padding-top: 1rem;
    text-align: left;
}

.editorial-body {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.85;
    color: #b0bbcb;
    letter-spacing: -0.01em;
}

    .editorial-body.font-semibold {
        font-weight: 600;
        color: #f7f7f7;
    }




/* =========================================
           SCROLL REVEAL
        ========================================= */

.reveal-item {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

    .reveal-item.is-visible {
        opacity: 1;
        transform: translateY(0);
    }


/* =========================================
           ANIMATION DELAYS
        ========================================= */







.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}


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

@media (min-width: 576px) {


    .hero-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


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

@media (min-width: 768px) {

    .primary-headline {
        font-size: 3rem;
    }



    .editorial-body {
        font-size: 1.25rem;
        line-height: 1.85;
    }
}


@media (min-width: 992px) {

    .hero-header {
        margin-bottom: 4rem;
    }
}


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

@media (max-width: 768px) {

    .editorial-body {
        font-size: 1.1rem;
        line-height: 1.7;
    }
}


@media (max-width: 575px) {

    .hero-header {
        margin-bottom: 2.5rem;
    }












    .sales-copy-body {
        padding-top: 0.5rem;
    }
}




/* Ambient Background Dot Pattern & Glows */






@keyframes floatSlow {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, -25px) scale(1.08);
    }
}



/* Header Typography */



/* Reference Graphic Preview Banner (Optionally visible as preview teaser) */

/* The Marketplace 3x4 Grid */




/* Category Cards */
.category-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.35rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--card-shadow);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

    .category-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .category-card:hover {
        transform: translateY(-5px);
        border-color: #38bdf8;
        box-shadow: 0 18px 32px -8px rgba(14, 165, 233, 0.18), 0 4px 12px rgba(0,0,0,0.03);
    }

        .category-card:hover::after {
            opacity: 1;
        }

/* Icon Bubble */




/* Custom Color Accents for each niche category */













/* Category Content */








/* "Your Imagination Is The Limit" Highlight Banner */




@keyframes pulseGlow {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}



/* Sub-text / Supporting Copy */








/* CTA / Interactive Row */

/* Scroll Animation Utility Classes */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Staggered Delay Helpers */
.delay-1 {
    transition-delay: 0.08s;
}

.delay-2 {
    transition-delay: 0.16s;
}

.delay-3 {
    transition-delay: 0.24s;
}

.delay-4 {
    transition-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 768px) {
    .grid-board {
        padding: 1.35rem;
        border-radius: 20px;
    }

    .category-card {
        padding: 1rem 0.9rem;
    }
}



.txt-green-sd {
    color: #01bead !important;
    text-shadow: 0 0 12px rgb(0 216 186 / 25%), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.row-highlight {
    padding: 50px 20px;
    border: 1px solid #cbeaf0;
    background: #f6fffe;
    border-radius: 40px;
    box-shadow: 11px 11px 7px 0px #e7e7e734;
}


.popup-img {
    opacity: 0;
    transform: scale(0.5);
    filter: blur(8px);
    transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
}

    .popup-img.is-visible {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }













/* =========================================================
   BOT + GRAPHIC
   ========================================================= */
.your-svg-wrapper {
    width: 550px;
    position: absolute;
    top: 0px;
    z-index: 9;
    left: -130px;
}

.bot-graphic-section {
    width: 100%;
    overflow: visible;
    padding: 0px 40px;
}

.bot-graphic-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
    padding-top: 56px;
}


/* =========================================================
   MAIN GRAPHIC
   ========================================================= */

.bot-graphic-main {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   BOT
   ========================================================= */

.bot-graphic-bot {
    position: absolute;
    left: 0px;
    bottom: -5%;
    width: 160px;
    height: auto;
    z-index: 5;
    opacity: 0;
    transform: translateY(-50%) translateX(-30px) scale(0.8);
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.18));
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   ACTIVE STATE
   ========================================================= */

.bot-graphic-wrap.bot-animation-active
.bot-graphic-main {
    opacity: 1;
    transform: scale(1);
}


.bot-graphic-wrap.bot-animation-active
.bot-graphic-bot {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
    animation: botFloating 3s ease-in-out 1s infinite;
}


/* =========================================================
   BOT FLOATING
   ========================================================= */

@keyframes botFloating {

    0% {
        transform: translateY(-50%) translateX(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(calc(-50% - 7px)) translateX(2px) rotate(-1deg) scale(1.01);
    }

    50% {
        transform: translateY(calc(-50% - 14px)) translateX(0) rotate(1deg) scale(1.03);
    }

    75% {
        transform: translateY(calc(-50% - 7px)) translateX(-2px) rotate(-1deg) scale(1.01);
    }

    100% {
        transform: translateY(-50%) translateX(0) rotate(0deg) scale(1);
    }
}


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

@media (max-width: 767px) {

    .bot-graphic-wrap {
        width: 100%;
    }

    .bot-graphic-bot {
        left: -20px;
        width: 100px;
    }
}


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

@media (max-width: 400px) {

    .bot-graphic-bot {
        left: -12px;
        width: 80px;
    }
}




section.sec-space.bg-3 {
    background-image: url("../../images/jv/bg3.jpg");
    background-position: top center;
    background-size: cover;
    background-color: #181f3b;
}

.lmt-txt {
    display: table;
    margin: 0px auto;
    background: #171e38;
    color: white;
    border: 2px solid #00b7af;
    text-align: center;
    padding: 10px 50px;
    border-radius: 150px;
    width: auto;
    font-family: 'Montserrat';
}

    .lmt-txt span {
        background: aliceblue;
        background: linear-gradient(to right, #54d4ff -4%, #fcfffd 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        display: inline-block;
        font-weight: 700;
    }




p.review-sec span {
    background: antiquewhite;
    display: table;
    margin: 0px auto;
    margin-bottom: 10px;
    background: #2A7B9B;
    background: linear-gradient(90deg, rgb(246 254 255) 0%, rgb(225 253 255) 100%);
    padding: 10px 50px;
    border-radius: 150px;
    border: 3px solid #bff1ea;
    color: #456482;
}

p.review-sec {
    font-size: 1.4rem;
}



@media (max-width: 767px) {
    p.review-sec {
        font-size: 1.2rem;
    }
}

.img-logo {
    width: 250px;
    max-width: 100%;
    margin-bottom: 10px;
}

.link-sec {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.img-5star {
    width: 350px;
    max-width: 100%;
}

.bg-touch {
    background: #00323f;
}

.link-to {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}



















/* =========================
           SCOPED SECTION CSS
           ========================= */
.b2v-social-proof {
    --b2v-bg: #05070c;
    background: radial-gradient( circle at 50% 0%, rgba(4, 79, 94, 0.35) 0%, transparent 45% ), radial-gradient( circle at 20% 40%, rgba(4, 79, 94, 0.18) 0%, transparent 50% ), radial-gradient( circle at 80% 60%, rgba(4, 79, 94, 0.15) 0%, transparent 45% ), #05070c;
}

    .b2v-social-proof *,
    .b2v-social-proof *::before,
    .b2v-social-proof *::after {
        box-sizing: border-box;
    }

    .b2v-social-proof .b2v-container {
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
    }

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

    .b2v-social-proof .b2v-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .b2v-social-proof .b2v-launch-wrap {
        margin-bottom: 18px;
    }

    .b2v-social-proof .b2v-launch-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 18px;
        font-size: 20px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #0d8285;
        background: rgb(68 215 239 / 8%);
        border: 1px solid rgb(68 184 239 / 28%);
        border-radius: 999px;
        box-shadow: 0 0 20px rgb(68 184 239 / 18%);
    }

    .b2v-social-proof .b2v-pulse-dot {
        width: 8px;
        height: 8px;
        flex: 0 0 8px;
        background: #44efe7;
        border-radius: 50%;
        box-shadow: 0 0 10px #44c0ef;
        animation: b2vPulse 2s infinite ease-in-out;
    }

@keyframes b2vPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.8);
    }
}

.b2v-social-proof .b2v-title {
    margin: 0 0 14px;
    color: #f8fafc;
    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.b2v-social-proof .b2v-description {
    max-width: 680px;
    margin: 0 auto 26px;
    color: #94a3b8;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
}

/* =========================
           STARS
           ========================= */

.b2v-social-proof .b2v-trust-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.b2v-social-proof .b2v-stars-header {
    margin-bottom: 8px;
    color: #fbbf24;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 4px;
}

.b2v-social-proof .b2v-trust-heading {
    margin: 0;
    color: #ffffff;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}

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

.b2v-social-proof .b2v-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

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

.b2v-social-proof .b2v-card {
    position: relative;
    min-height: 220px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient( 145deg, rgba(22, 28, 45, 0.72) 0%, rgba(10, 15, 27, 0.88) 100% );
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

    .b2v-social-proof .b2v-card::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.12), transparent 60% );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    .b2v-social-proof .b2v-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.65), 0 0 25px -5px rgba(99, 102, 241, 0.15);
    }

/* =========================
           CARD COLOR HOVERS
           ========================= */

.b2v-social-proof .b2v-card-google:hover {
    border-color: rgba(234, 67, 53, 0.3);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.65), 0 0 30px -5px rgba(234, 67, 53, 0.18);
}

.b2v-social-proof .b2v-card-trustpilot:hover {
    border-color: rgba(0, 182, 122, 0.3);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.65), 0 0 30px -5px rgba(0, 182, 122, 0.2);
}

.b2v-social-proof .b2v-card-rankings:hover {
    border-color: rgba(255, 112, 67, 0.3);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.65), 0 0 30px -5px rgba(255, 112, 67, 0.2);
}

.b2v-social-proof .b2v-card-users:hover {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.65), 0 0 30px -5px rgba(56, 189, 248, 0.2);
}

/* =========================
           CARD TOP
           ========================= */

.b2v-social-proof .b2v-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 30px;
}

/* =========================
           ICON
           ========================= */

.b2v-social-proof .b2v-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 36px;
    font-weight: 700;
}

.b2v-social-proof .b2v-icon-google {
    color: #ea4335;
    background: rgba(234, 67, 53, 0.12);
    border: 1px solid rgba(234, 67, 53, 0.25);
}

.b2v-social-proof .b2v-icon-trustpilot {
    color: #00b67a;
    background: rgba(0, 182, 122, 0.12);
    border: 1px solid rgba(0, 182, 122, 0.25);
}

.b2v-social-proof .b2v-icon-software {
    color: #ff7043;
    background: rgba(255, 112, 67, 0.12);
    border: 1px solid rgba(255, 112, 67, 0.25);
}

.b2v-social-proof .b2v-icon-users {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
}

/* =========================
           TAG
           ========================= */

.b2v-social-proof .b2v-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.b2v-social-proof .b2v-tag-google {
    color: #f87171;
    background: rgba(234, 67, 53, 0.1);
    border: 1px solid rgba(234, 67, 53, 0.25);
}

.b2v-social-proof .b2v-tag-trustpilot {
    color: #34d399;
    background: rgba(0, 182, 122, 0.1);
    border: 1px solid rgba(0, 182, 122, 0.25);
}

.b2v-social-proof .b2v-tag-rankings {
    color: #fb923c;
    background: rgba(255, 112, 67, 0.1);
    border: 1px solid rgba(255, 112, 67, 0.25);
}

.b2v-social-proof .b2v-tag-users {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
}

/* =========================
           BIG STAT
           ========================= */

.b2v-social-proof .b2v-stat-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.b2v-social-proof .b2v-big-stat {
    color: #ffffff;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.b2v-social-proof .b2v-rating-stars {
    color: #fbbf24;
    font-size: 30px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.b2v-social-proof .b2v-community-text {
    color: #38bdf8;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
}

/* =========================
           CARD FOOTER
           ========================= */

.b2v-social-proof .b2v-card-footer {
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.b2v-social-proof .b2v-card-footer-text {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 400;
}

/* =========================
           RANKING BADGES
           ========================= */

.b2v-social-proof .b2v-ranking-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.b2v-social-proof .b2v-ranking-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
}

    .b2v-social-proof .b2v-ranking-badge .b2v-trophy {
        margin-right: 6px;
        color: #fbbf24;
    }

    .b2v-social-proof .b2v-ranking-badge .b2v-stars {
        margin-right: 6px;
        color: #f87171;
    }

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

@media (max-width: 767px) {

    .b2v-social-proof {
        padding: 60px 16px;
    }

        .b2v-social-proof .b2v-header {
            margin-bottom: 35px;
        }

        .b2v-social-proof .b2v-title {
            font-size: 30px;
        }

        .b2v-social-proof .b2v-description {
            font-size: 15px;
            line-height: 1.65;
        }

        .b2v-social-proof .b2v-trust-heading {
            font-size: 18px;
        }

        .b2v-social-proof .b2v-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .b2v-social-proof .b2v-card {
            min-height: 205px;
            padding: 22px;
        }

        .b2v-social-proof .b2v-big-stat {
            font-size: 38px;
        }

        .b2v-social-proof .b2v-tag {
            font-size: 10px;
            padding: 5px 9px;
        }
}

@media (max-width: 420px) {

    .b2v-social-proof .b2v-card-top {
        align-items: flex-start;
    }

    .b2v-social-proof .b2v-tag {
        white-space: normal;
        text-align: right;
    }

    .b2v-social-proof .b2v-big-stat {
        font-size: 34px;
    }

    .b2v-social-proof .b2v-rating-stars {
        font-size: 13px;
    }
}
/* =========================================================
   7 DAYS LAUNCH SCHEDULE
   Completely isolated CSS
   ========================================================= */

.launch-schedule-section {
    --ls-blue: #0088cc;
    --ls-green: #00ff9d;
    --ls-red: #e52525;
    --ls-cyan: #00e5ff;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 70px 15px 55px;
    background-color: #f7fafc;
    background-image: linear-gradient( to right, rgba(203, 213, 225, 0.4) 1px, transparent 1px ), linear-gradient( to bottom, rgba(203, 213, 225, 0.4) 1px, transparent 1px );
    background-size: 160px 160px;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    isolation: isolate;
}


/* =========================================================
   GOOGLE FONTS
   ========================================================= */

.launch-schedule-section {
    font-family: 'Poppins', sans-serif;
}

    .launch-schedule-section h2,
    .launch-schedule-section .launch-card-date,
    .launch-schedule-section .launch-webinar-heading,
    .launch-schedule-section .launch-webinar-date,
    .launch-schedule-section .launch-timeline-badge {
        font-family: 'Montserrat', sans-serif;
    }


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.launch-schedule-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================================
   WATERMARK NUMBERS
   ========================================================= */

.launch-schedule-watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    z-index: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(70px, 9vw, 150px);
    color: rgba(203, 213, 225, 0.4);
}

    .launch-schedule-watermark span {
        position: absolute;
    }

.ls-num-1 {
    top: 20px;
    left: 2%;
}

.ls-num-2 {
    top: 15px;
    left: 25%;
}

.ls-num-3 {
    top: 15px;
    right: 25%;
}

.ls-num-4 {
    top: 20px;
    right: 4%;
}

.ls-num-5 {
    top: 48%;
    left: 1%;
}

.ls-num-6 {
    bottom: 100px;
    left: 3%;
}

.ls-num-7 {
    bottom: 15px;
    left: 7%;
}

.ls-num-8 {
    bottom: 15px;
    left: 25%;
}

.ls-num-9 {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.ls-num-10 {
    bottom: 15px;
    right: 25%;
}

.ls-num-11 {
    bottom: 70px;
    right: 4%;
}


/* =========================================================
   TOP CALENDAR DECORATIONS
   ========================================================= */

.launch-schedule-calendar {
    position: absolute;
    top: -5px;
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: none;
    user-select: none;
}

.ls-calendar-left {
    left: 30px;
}

.ls-calendar-right {
    right: 30px;
}


.ls-calendar-card {
    width: 64px;
    height: 68px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #dbeafe;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    transform: rotate(-12deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.ls-calendar-right .ls-calendar-card {
    transform: rotate(12deg);
    border-color: #fbcfe8;
}

.ls-calendar-card:hover {
    transform: rotate(0deg);
}


.ls-calendar-month {
    width: 100%;
    padding: 3px 2px;
    background: #1e90ff;
    color: #ffffff;
    text-align: center;
    font-size: 9px;
    font-family: Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.ls-calendar-right .ls-calendar-month {
    background: #e83e8c;
}


.ls-calendar-date {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e90ff;
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 900;
}

.ls-calendar-right .ls-calendar-date {
    color: #334155;
}


.ls-calendar-trail {
    width: 65px;
    height: 40px;
    margin-left: -8px;
    color: #06b6d4;
    opacity: 0.6;
}


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

.launch-schedule-header {
    position: relative;
    z-index: 5;
    text-align: center;
    margin-bottom: 35px;
}


.launch-schedule-title-box {
    display: inline-block;
    padding: 9px 48px;
    background: #0088cc;
    border: 2px solid rgba(255,255,255,0.65);
    border-radius: 9px;
    box-shadow: 0 5px 12px rgba(0, 136, 204, 0.2);
}


    .launch-schedule-title-box h2 {
        margin: 0;
        color: #ffffff;
        font-family: 'Oswald', sans-serif;
        font-size: clamp(30px, 4vw, 50px);
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: 1px;
    }


.launch-schedule-subtitle {
    margin-top: 4px;
    color: #000000;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(21px, 2.5vw, 32px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.launch-schedule-grid {
    position: relative;
    z-index: 5;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 15px;
    margin-bottom: 45px;
}


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

.launch-card {
    position: relative;
    min-height: 390px;
    padding: 24px;
    border-radius: 24px;
    border: 2px solid;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(.165,.84,.44,1), box-shadow 0.35s ease;
}

    .launch-card:hover {
        transform: translateY(-8px);
    }


/* =========================================================
   GREEN CARD
   ========================================================= */

.launch-card-green {
    background: linear-gradient( to bottom, #013524, #012519 );
    border-color: #10b981;
    box-shadow: 0 0 25px rgba(16,185,129,0.45), 0 0 50px rgba(5,150,105,0.25);
}

    .launch-card-green:hover {
        box-shadow: 0 0 35px rgba(52,211,153,0.7), 0 0 70px rgba(16,185,129,0.4);
    }


/* =========================================================
   RED CARD
   ========================================================= */

.launch-card-red {
    background: linear-gradient( to bottom, #e52525, #c51414 );
    border-color: #ef4444;
    box-shadow: 0 0 25px rgba(239,68,68,0.45), 0 0 50px rgba(220,38,38,0.25);
}

    .launch-card-red:hover {
        box-shadow: 0 0 35px rgba(248,113,113,0.7), 0 0 70px rgba(239,68,68,0.4);
    }


/* =========================================================
   BLUE CARD
   ========================================================= */

.launch-card-blue {
    background: linear-gradient( to bottom, #131929, #0c101d );
    border-color: #1e293b;
    box-shadow: 0 0 25px rgba(14,165,233,0.35), 0 0 45px rgba(2,132,199,0.2);
}

    .launch-card-blue:hover {
        box-shadow: 0 0 35px rgba(56,189,248,0.65), 0 0 65px rgba(14,165,233,0.35);
    }


/* =========================================================
   CARD BADGE
   ========================================================= */

.launch-card-badge {
    padding: 5px 20px;
    margin-bottom: 24px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.95);
    color: #025a3a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.launch-card-red .launch-card-badge {
    color: #ffffff;
    background: rgba(92,8,8,0.75);
    border: 1px solid rgb(219 32 32);
}


/* =========================================================
   ICON BOX
   ========================================================= */

.launch-icon-box {
    width: 160px;
    height: 160px;
    padding: 21px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: launchFloatSoft 4s ease-in-out infinite;
}

    .launch-icon-box svg {
        width: 80px;
        height: 80px;
        filter: drop-shadow(0 5px 5px rgba(0,0,0,0.25));
    }

.launch-icon-green {
    background: #00a86b;
    box-shadow: 0px 0px 16px 4px #00a86b66;
}

.launch-icon-red {
    background: #a81313;
    box-shadow: 0px 0px 16px 4px #a813138b;
    animation-delay: 1.8s;
}

.launch-icon-blue {
    background: #182136;
    box-shadow: 0px 0px 17px 7px #1b253d70;
}


/* =========================================================
   CARD DATE
   ========================================================= */

.launch-card-date {
    margin-bottom: 18px;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
}

    .launch-card-date div {
        font-size: clamp(22px, 2vw, 31px);
        letter-spacing: -0.5px;
    }

    .launch-card-date strong {
        display: block;
        margin-top: 6px;
        font-size: clamp(30px, 2.7vw, 42px);
        letter-spacing: 1px;
    }


/* Green date */

.launch-card-green .launch-card-date {
    color: #00ff9d;
}


/* Red date */

.launch-card-red .launch-card-date {
    color: #ffffff;
}


/* =========================================================
   CARD TIME
   ========================================================= */

.launch-card-time {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.42);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

    .launch-card-time svg {
        width: 24px;
        height: 24px;
        position: relative;
        top: -1px;
    }

.launch-card-green .launch-card-time svg {
    color: #34d399;
}


/* =========================================================
   WEBINAR CARD
   ========================================================= */

.launch-webinar-heading {
    margin-bottom: 34px;
    line-height: 1;
    letter-spacing: 1px;
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 900;
}

    .launch-webinar-heading span {
        color: #ffffff;
    }

    .launch-webinar-heading strong {
        color: #00e5ff;
    }


/* Sessions */

.launch-webinar-sessions {
    width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.launch-webinar-session {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.launch-webinar-date {
    color: #00e5ff;
    font-size: 23px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.launch-webinar-time {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    padding: 4px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #334155;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 150px;
}

    .launch-webinar-time svg {
        width: 28px;
        height: 28px;
        color: #00e5ff;
        position: relative;
        top: -2px;
    }


/* =========================================================
   BOTTOM TIMELINE
   ========================================================= */

.launch-timeline {
    position: relative;
    width: 100%;
    max-width: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.launch-timeline-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-top: 2px dashed #94a3b8;
    z-index: 0;
}


.launch-timeline-content {
    position: relative;
    width: 100%;
    min-height: 65px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}


/* =========================================================
   TIMELINE BADGES
   ========================================================= */

.launch-timeline-badge {
    position: relative;
    z-index: 3;
    padding: 9px 22px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: skewX(-14deg);
    opacity: 0;
}


    .launch-timeline-badge span {
        display: inline-block;
        transform: skewX(14deg);
    }


/* Green */

.launch-timeline-green {
    background: #008f5a;
}


/* Red */

.launch-timeline-red {
    background: #e52525;
}


/* =========================================================
   ROCKET
   ========================================================= */

.launch-timeline-rocket {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 5;
    padding-left: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translate(-10px, -50%) scale(0.75);
}


    .launch-timeline-rocket svg {
        width: 55px;
        height: 55px;
        filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.2));
    }


/* =========================================================
   START TIMELINE ANIMATION
   ========================================================= */

.launch-timeline.timeline-started
.launch-timeline-rocket {
    animation: timelineRocketTravel 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}


/* =========================================================
   GREEN BADGE APPEAR
   ========================================================= */

.launch-timeline.timeline-started
.launch-timeline-green {
    animation: timelineGreenAppear 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}


/* =========================================================
   RED BADGE APPEAR
   ========================================================= */

.launch-timeline.timeline-started
.launch-timeline-red {
    animation: timelineRedAppear 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.25s forwards;
}


/* =========================================================
   GREEN BADGE ANIMATION
   ========================================================= */

@keyframes timelineGreenAppear {

    0% {
        opacity: 0;
        transform: skewX(-14deg) translateX(-35px) scale(0.85);
    }

    100% {
        opacity: 1;
        transform: skewX(-14deg) translateX(0) scale(1);
    }
}


/* =========================================================
   RED BADGE ANIMATION
   ========================================================= */

@keyframes timelineRedAppear {

    0% {
        opacity: 0;
        transform: skewX(-14deg) translateX(35px) scale(0.85);
    }

    100% {
        opacity: 1;
        transform: skewX(-14deg) translateX(0) scale(1);
    }
}


/* =========================================================
   ROCKET LEFT → RIGHT
   ========================================================= */

@keyframes timelineRocketTravel {

    0% {
        left: 0;
        opacity: 0;
        transform: translate(-10px, -50%) scale(0.75) rotate(0deg);
    }

    8% {
        opacity: 1;
    }

    20% {
        transform: translate(0, -50%) scale(0.9) rotate(-2deg);
    }

    50% {
        transform: translate(0, -50%) scale(1) rotate(1deg);
    }

    75% {
        transform: translate(0, -50%) scale(1) rotate(-1deg);
    }

    100% {
        left: calc(100% - 55px);
        opacity: 1;
        transform: translate(0, -50%) scale(1) rotate(0deg);
    }
}


/* =========================================================
   ROCKET FLAME
   ========================================================= */

@keyframes launchFlame {

    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.25) translateX(-2px);
        opacity: 1;
    }
}

.launch-flame {
    transform-origin: center;
    animation: launchFlame 0.4s ease-in-out infinite alternate;
}


/* =========================================================
   ICON FLOAT
   ========================================================= */

@keyframes launchFloatSoft {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================================================
   OLD ROCKET ANIMATION
   Kept for compatibility
   ========================================================= */

@keyframes launchRocket {

    0%, 100% {
        transform: translate(0,0) rotate(0deg);
    }

    25% {
        transform: translate(2px,-2px) rotate(1deg);
    }

    75% {
        transform: translate(-1px,1px) rotate(-1deg);
    }
}


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

@media (max-width: 900px) {

    .launch-schedule-section {
        padding-top: 75px;
    }

    .launch-schedule-grid {
        gap: 15px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .launch-card {
        padding: 20px 15px;
        min-height: 370px;
    }

    .launch-icon-box {
        width: 100px;
        height: 100px;
    }

        .launch-icon-box svg {
            width: 72px;
            height: 72px;
        }

    .launch-timeline-badge {
        padding: 8px 16px;
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .launch-schedule-section {
        padding: 70px 12px 45px;
    }


    .launch-schedule-watermark {
        font-size: 80px;
    }


    .ls-num-3,
    .ls-num-4,
    .ls-num-10,
    .ls-num-11 {
        display: none;
    }


    .ls-calendar-left {
        left: 5px;
    }

    .ls-calendar-right {
        right: 5px;
    }


    .ls-calendar-card {
        width: 54px;
        height: 60px;
    }

    .ls-calendar-month {
        font-size: 7px;
    }

    .ls-calendar-date {
        font-size: 21px;
    }

    .ls-calendar-trail {
        display: none;
    }


    .launch-schedule-header {
        margin-bottom: 28px;
    }


    .launch-schedule-title-box {
        padding: 8px 24px;
    }

        .launch-schedule-title-box h2 {
            font-size: 30px;
        }

    .launch-schedule-subtitle {
        font-size: 23px;
    }


    .launch-schedule-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 5px;
        margin-bottom: 35px;
    }


    .launch-card {
        min-height: 360px;
        padding: 25px 20px;
    }


    .launch-icon-box {
        width: 108px;
        height: 108px;
    }


        .launch-icon-box svg {
            width: 76px;
            height: 76px;
        }


    .launch-card-date div {
        font-size: 25px;
    }

    .launch-card-date strong {
        font-size: 35px;
    }


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

    .launch-timeline {
        max-width: 100%;
    }


    .launch-timeline-line {
        display: block;
        left: 0;
        right: 0;
    }


    .launch-timeline-content {
        width: 100%;
        min-height: 52px;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 3px;
    }


    .launch-timeline-badge {
        padding: 8px 13px;
        font-size: 12px;
        white-space: nowrap;
    }


    .launch-timeline-rocket {
        padding-left: 0;
    }


        .launch-timeline-rocket svg {
            width: 40px;
            height: 40px;
        }
}


/* =========================================================
   REVEAL ONE
   ========================================================= */

.reveal-one {
    opacity: 0;
    transform: translateY(50px) scale(0.96);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

    .reveal-one.reveal-active {
        opacity: 1;
        transform: translateY(0) scale(1);
    }


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

@media (max-width: 400px) {

    .launch-schedule-title-box h2 {
        font-size: 26px;
    }

    .launch-schedule-subtitle {
        font-size: 20px;
    }

    .ls-calendar-card {
        width: 48px;
        height: 56px;
    }

    .launch-timeline-badge {
        font-size: 10px;
        padding: 7px 10px;
    }
}


















/* 
<!-- =========================================================
     EPIC MONEY-MAKING FUNNEL
     Standalone / Vanilla CSS / No Tailwind
     Safe to paste into an existing sales page
========================================================= --> */

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

/* =========================================================
   MAIN WRAPPER
   Everything is scoped to .epic-funnel-section
========================================================= */

.epic-funnel-section {
    --ef-primary: #00a8cc;
    --ef-cyan: #15cdcf;
    --ef-dark: #1b253b;
    --ef-text: #1e293b;
    --ef-muted: #64748b;
    --ef-white: #ffffff;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 40px 16px 60px;
    font-family: 'Inter', sans-serif;
    color: var(--ef-text);
    background-color: #f6f9fc;
    background-image: radial-gradient( rgba(0, 180, 216, 0.12) 1px, transparent 1px );
    background-size: 24px 24px;
    box-sizing: border-box;
}

    .epic-funnel-section *,
    .epic-funnel-section *::before,
    .epic-funnel-section *::after {
        box-sizing: border-box;
    }


/* =========================================================
   CONTAINER
========================================================= */

.epic-funnel-container {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    position: relative;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.epic-funnel-section .epic-funnel-montserrat {
    font-family: 'Montserrat', sans-serif;
}


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

.epic-funnel-header {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.epic-funnel-title {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #1b253b;
}

    .epic-funnel-title span {
        color: #00a8cc;
        letter-spacing: normal;
    }

.epic-funnel-subtitle {
    margin: 8px 0 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: #00a8cc;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================================
   ROWS
========================================================= */

.epic-funnel-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    position: relative;
    z-index: 10;
    margin-bottom: 16px;
}


/* =========================================================
   FUNNEL CARD
========================================================= */

.epic-funnel-card {
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid rgba(21, 205, 207, 0.4);
    box-shadow: 0 8px 25px rgba(21, 205, 207, 0.12);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, z-index 0s;
}

    .epic-funnel-card:hover {
        transform: translateY(-5px);
        z-index: 30 !important;
    }


    /* Top highlight */

    .epic-funnel-card::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 24px;
        right: 24px;
        height: 4px;
        background: #15cdcf;
        border-radius: 999px 999px 0 0;
    }


/* =========================================================
   PRODUCT MOCKUP
========================================================= */

.epic-funnel-product {
    width: 150px;
    flex: 0 0 150px;
    position: relative;
}

.epic-funnel-product-box {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    overflow: hidden;
    border-radius: 13px;
    background: #d5fcf9;
}

.epic-funnel-product-brand {
    font-size: 7px;
    line-height: 1;
    font-weight: 700;
    color: #22d3ee;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.epic-funnel-product-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
}

.epic-funnel-product-logo {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 45deg, #00b4d8, #90e0ef );
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 900;
}

.epic-funnel-product-name {
    margin-top: 4px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
}

.epic-funnel-product-label {
    margin-top: 3px;
    padding: 2px 4px;
    color: #38bdf8;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    font-size: 6px;
    line-height: 1.1;
    font-weight: 700;
}

.epic-funnel-product-bottom {
    color: #38bdf8;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.epic-funnel-info {
    flex: 1;
    min-width: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.epic-funnel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 6px 18px 4px 18px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 500;
    /* letter-spacing: 0.08em; */
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0, 168, 204, 0.18);
    background: rgb(0 164 173);
    background: linear-gradient(90deg, rgb(0 164 173) 0%, rgb(1 206 211) 100%);
}

.epic-funnel-name {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 700;
    color: #334155;
}

.epic-funnel-price {
    margin-top: 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.epic-funnel-small {
    margin-top: 3px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* =========================================================
   ARROWS
========================================================= */

.epic-funnel-horizontal-arrow {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 34px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.epic-funnel-arrow-1 {
    left: 32%;
}

.epic-funnel-arrow-2 {
    left: 65.5%;
}

.epic-funnel-svg {
    display: block;
    overflow: visible;
}

.epic-funnel-animated-path {
    stroke-dasharray: 4 4;
    animation: epicFunnelDashMove 1s linear infinite;
}

@keyframes epicFunnelDashMove {
    to {
        stroke-dashoffset: -20;
    }
}


/* =========================================================
   VERTICAL ARROWS
========================================================= */

.epic-funnel-vertical-arrow {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 4px 0;
    position: relative;
    z-index: 5;
}

.epic-funnel-vertical-arrow-left {
    justify-content: flex-start;
    padding-left: 16.5%;
}


/* =========================================================
   ROW 3
========================================================= */

.epic-funnel-row-three {
    width: 100%;
    max-width: 384px;
    margin: 0 auto 16px;
    position: relative;
    z-index: 10;
}


/* =========================================================
   PURPLE CARD
========================================================= */

.epic-funnel-card-purple {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.12);
}

    .epic-funnel-card-purple::before {
        background: #6366f1;
    }


/* =========================================================
   RED / ROSE CARD
========================================================= */

.epic-funnel-card-rose {
    border-color: rgba(244, 63, 94, 0.6);
    box-shadow: 0 8px 25px rgba(244, 63, 94, 0.12);
}

    .epic-funnel-card-rose::before {
        background: #f43f5e;
    }


/* =========================================================
   BLUE CARD
========================================================= */

.epic-funnel-card-blue {
    border-color: rgba(2, 132, 199, 0.6);
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.12);
}

    .epic-funnel-card-blue::before {
        background: #0ea5e9;
    }


/* =========================================================
   ORANGE CARD
========================================================= */

.epic-funnel-card-orange {
    border-color: rgba(249, 115, 22, 0.6);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.12);
}

    .epic-funnel-card-orange::before {
        background: #f97316;
    }


/* =========================================================
   SPECIAL PRODUCT THEMES
========================================================= */

.epic-funnel-product-purple {
    border-radius: 13px;
    background: #e9e7ff;
}

    .epic-funnel-product-purple .epic-funnel-product-brand {
        color: #a5b4fc;
    }

    .epic-funnel-product-purple .epic-funnel-product-logo {
        background: linear-gradient( 45deg, #6366f1, #a855f7 );
    }

    .epic-funnel-product-purple .epic-funnel-product-label {
        color: #c7d2fe;
    }

    .epic-funnel-product-purple .epic-funnel-product-bottom {
        color: #d8b4fe;
    }


.epic-funnel-product-rose {
    background: #ffe7f4;
    border-radius: 13px;
}

    .epic-funnel-product-rose .epic-funnel-product-brand {
        color: #fda4af;
    }

    .epic-funnel-product-rose .epic-funnel-product-logo {
        background: linear-gradient( 45deg, #f43f5e, #f59e0b );
    }

    .epic-funnel-product-rose .epic-funnel-product-label {
        color: #fcd34d;
    }

    .epic-funnel-product-rose .epic-funnel-product-bottom {
        color: #fbbf24;
    }


.epic-funnel-product-blue {
    background: #d9eeff;
    border-radius: 13px;
}

    .epic-funnel-product-blue .epic-funnel-product-brand {
        color: #7dd3fc;
    }

    .epic-funnel-product-blue .epic-funnel-product-logo {
        border-radius: 7px;
        background: linear-gradient( 135deg, #3b82f6, #4f46e5 );
    }

    .epic-funnel-product-blue .epic-funnel-product-label {
        color: #bae6fd;
    }

    .epic-funnel-product-blue .epic-funnel-product-bottom {
        color: #38bdf8;
    }


/* =========================================================
   CLOUDFUNNELS PRODUCT
========================================================= */

.epic-funnel-product-cloud {
    background: #fff8df;
    border-radius: 13px;
}

    .epic-funnel-product-cloud .epic-funnel-product-brand {
        color: #ea580c;
    }

.epic-funnel-cloud-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: linear-gradient( 45deg, #fb923c, #f59e0b );
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.epic-funnel-cloud-name {
    margin-top: 5px;
    color: #1e293b;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
}

.epic-funnel-cloud-label {
    margin-top: 3px;
    color: #64748b;
    font-size: 6px;
    line-height: 1;
}

.epic-funnel-cloud-bottom {
    color: #ea580c;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
}


/* =========================================================
   SPECIAL BADGES
========================================================= */

.epic-funnel-badge-purple {
    background: #6b58dc;
    background: linear-gradient(90deg, #6b58dc 0%, #5b49c5 100%);
}

.epic-funnel-badge-rose {
    background: #f43f5e;
    background: linear-gradient(90deg, #f43f5e 0%, #bd2f47 100%);
}

.epic-funnel-badge-blue {
    background: #3b82f6;
    background: linear-gradient(90deg, #3b82f6 0%, #2558ab 100%);
}

.epic-funnel-badge-orange {
    background: #f97316;
    background: linear-gradient(90deg, #f97316 0%, #d06112 100%);
}


/* =========================================================
   ALL-INCLUSIVE BADGE
========================================================= */

.epic-funnel-inclusive-wrap {
    position: relative;
    z-index: 10;
    margin: 0 auto 24px;
    display: flex;
    justify-content: center;
}

.epic-funnel-inclusive-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px;
    border-radius: 999px;
    background: #fffbf2;
    border: 2px solid #e69d45;
    box-shadow: 0 4px 15px rgba(230, 157, 69, 0.2);
    animation: epicFunnelPulseGlow 2.5s ease-in-out infinite;
}

    .epic-funnel-inclusive-badge span {
        font-size: 1.5rem;
        font-weight: 800;
        color: #df7a16;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-family: 'Montserrat';
    }

@keyframes epicFunnelPulseGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.35), 0 0 0 1px rgba(245, 158, 11, 0.2);
    }

    50% {
        box-shadow: 0 0 25px rgba(245, 158, 11, 0.6), 0 0 0 3px rgba(245, 158, 11, 0.4);
    }
}


/* =========================================================
   ALL-INCLUSIVE SECTION
========================================================= */

.epic-funnel-inclusive-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 24px;
    background: #341b0e;
    border: 1px solid rgba(120, 53, 15, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}


    /* Background lights */

    .epic-funnel-inclusive-section::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        top: -80px;
        left: -80px;
        border-radius: 50%;
        background: rgba(217, 119, 6, 0.1);
        filter: blur(60px);
        pointer-events: none;
    }

    .epic-funnel-inclusive-section::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        right: -80px;
        bottom: -80px;
        border-radius: 50%;
        background: rgba(234, 88, 12, 0.1);
        filter: blur(60px);
        pointer-events: none;
    }

.epic-funnel-inclusive-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 48px;
}


/* =========================================================
   3D BOX AREA
========================================================= */

.epic-funnel-mockup-area {
    width: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.epic-funnel-main-box {
    width: 320px;
    max-width: 100%;
    position: relative;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    background: linear-gradient( to bottom, #2b180d, #1a0c06, #0d0502 );
    border: 2px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

    .epic-funnel-main-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 45deg, rgba(245, 158, 11, 0.05), transparent, rgba(251, 191, 36, 0.1) );
        pointer-events: none;
    }


/* =========================================================
   BOX BRAND
========================================================= */

.epic-funnel-box-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.epic-funnel-box-brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #dc2626;
}

.epic-funnel-box-brand-text {
    color: #e2e8f0;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================================
   MAIN MARTSI LOGO
========================================================= */

.epic-funnel-main-logo {
    position: relative;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.epic-funnel-main-logo-icon {
    width: 96px;
    height: 96px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient( to bottom, #fbbf24, #d97706, #92400e );
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.epic-funnel-main-logo-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #180d07;
}

.epic-funnel-main-logo-letter {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    background: linear-gradient( to bottom, #fde68a, #fbbf24, #d97706 );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.epic-funnel-main-title {
    margin: 12px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.08em;
}

.epic-funnel-main-label {
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    background: rgba(69, 26, 3, 0.8);
    color: #fcd34d;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* =========================================================
   MINI ICONS
========================================================= */

.epic-funnel-mini-icons {
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0.9;
}

.epic-funnel-mini-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .epic-funnel-mini-icon.cyan {
        background: rgba(8, 145, 178, 0.3);
        border-color: rgba(34, 211, 238, 0.4);
    }

    .epic-funnel-mini-icon.purple {
        background: rgba(147, 51, 234, 0.3);
        border-color: rgba(192, 132, 252, 0.4);
    }

    .epic-funnel-mini-icon.amber {
        background: rgba(217, 119, 6, 0.3);
        border-color: rgba(251, 191, 36, 0.4);
    }


/* =========================================================
   ALL-INCLUSIVE BAR
========================================================= */

.epic-funnel-box-bottom {
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    text-align: center;
    border-radius: 4px;
    background: linear-gradient( to right, #b45309, #f59e0b, #b45309 );
}

    .epic-funnel-box-bottom span {
        font-family: 'Montserrat', sans-serif;
        color: #1a0d06;
        font-size: 12px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }


/* =========================================================
   INCLUSIVE CONTENT
========================================================= */

.epic-funnel-inclusive-content {
    flex: 1;
    min-width: 0;
}

.epic-funnel-inclusive-title {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.epic-funnel-inclusive-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.epic-funnel-inclusive-price {
    font-family: 'Montserrat', sans-serif;
    color: #e69d45;
    font-size: 52px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.epic-funnel-inclusive-close {
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 600;
}

.epic-funnel-description {
    margin-bottom: 24px;
    color: #b6b6b7;
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: 500;
}

    .epic-funnel-description p {
        margin: 0 0 10px;
    }

        .epic-funnel-description p:last-child {
            margin-bottom: 0;
        }

    .epic-funnel-description strong {
        color: #e69d45;
        font-weight: 700;
    }


/* =========================================================
   ORDER BUMP TITLE
========================================================= */

.epic-funnel-bump-title {
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   ORDER BUMP GRID
========================================================= */

.epic-funnel-bumps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.epic-funnel-bump {
    min-width: 0;
    padding: 4px 14px;
    border-right: 1px solid rgba(120, 53, 15, 0.6);
}

    .epic-funnel-bump:first-child {
        padding-left: 0;
    }

    .epic-funnel-bump:last-child {
        border-right: 0;
        padding-right: 0;
    }

.epic-funnel-bump-name {
    margin: 0 0 6px;
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.35;
    font-weight: 400;
}

.epic-funnel-bump-price {
    margin: 0;
    color: #e69d45;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
    line-height: 1;
    font-weight: 900;
}


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

@media (max-width: 900px) {

    .epic-funnel-title {
        font-size: 36px;
    }

    .epic-funnel-row {
        gap: 16px;
    }

    .epic-funnel-card {
        padding: 15px;
    }

    .epic-funnel-product {
        width: 82px;
        height: 112px;
        flex-basis: 82px;
    }

    .epic-funnel-info {
        padding-left: 10px;
    }

    .epic-funnel-name {
        font-size: 14px;
    }

    .epic-funnel-price {
        font-size: 27px;
    }

    .epic-funnel-inclusive-section {
        padding: 30px;
    }

    .epic-funnel-inclusive-inner {
        gap: 30px;
    }

    .epic-funnel-inclusive-title {
        font-size: 25px;
    }

    .epic-funnel-inclusive-price {
        font-size: 44px;
    }
}


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

@media (max-width: 767px) {

    .epic-funnel-section {
        padding: 30px 12px 45px;
    }

    .epic-funnel-header {
        margin-bottom: 30px;
    }

    .epic-funnel-title {
        font-size: 28px;
    }

    .epic-funnel-subtitle {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .epic-funnel-row {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
    }

    .epic-funnel-card {
        width: 100%;
        padding: 18px;
    }

    .epic-funnel-product {
        width: 90px;
        height: 120px;
        flex-basis: 90px;
    }

    .epic-funnel-info {
        padding-left: 14px;
    }

    .epic-funnel-name {
        font-size: 15px;
    }

    .epic-funnel-price {
        font-size: 28px;
    }

    /* Hide desktop horizontal arrows */
    .epic-funnel-horizontal-arrow {
        display: none;
    }

    /* Vertical arrows */
    .epic-funnel-vertical-arrow,
    .epic-funnel-vertical-arrow-left {
        justify-content: center;
        padding-left: 0;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .epic-funnel-row-three {
        width: 100%;
        max-width: none;
    }

    .epic-funnel-inclusive-badge {
        padding: 9px 20px;
    }

        .epic-funnel-inclusive-badge span {
            font-size: 15px;
        }

    .epic-funnel-inclusive-section {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .epic-funnel-inclusive-inner {
        flex-direction: column;
        gap: 30px;
    }

    .epic-funnel-mockup-area {
        width: 100%;
    }

    .epic-funnel-main-box {
        width: 270px;
    }

    .epic-funnel-inclusive-content {
        width: 100%;
        text-align: center;
    }

    .epic-funnel-inclusive-title {
        font-size: 22px;
    }

    .epic-funnel-inclusive-price-row {
        justify-content: center;
    }

    .epic-funnel-inclusive-price {
        font-size: 42px;
    }

    .epic-funnel-description {
        font-size: 13px;
        text-align: left;
    }

    .epic-funnel-bump-title {
        text-align: center;
    }

    .epic-funnel-bumps {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .epic-funnel-bump,
    .epic-funnel-bump:first-child,
    .epic-funnel-bump:last-child {
        padding: 10px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(120, 53, 15, 0.6);
    }

        .epic-funnel-bump:last-child {
            border-bottom: 0;
        }

    .epic-funnel-bump-name {
        margin-bottom: 4px;
    }

    .epic-funnel-bump-price {
        font-size: 27px;
    }
}


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

@media (max-width: 420px) {

    .epic-funnel-title {
        font-size: 25px;
    }

    .epic-funnel-card {
        padding: 14px;
    }

    .epic-funnel-product {
        width: 100px;
        height: 130px;
        flex-basis: 100px;
    }

    .epic-funnel-info {
        padding-left: 10px;
    }

    .epic-funnel-badge {
        font-size: 9px;
        padding: 5px 9px;
    }

    .epic-funnel-name {
        font-size: 13px;
    }

    .epic-funnel-price {
        font-size: 25px;
    }

    .epic-funnel-inclusive-price {
        font-size: 38px;
    }
}

/* 
<!-- =========================================================
     SECTION START
========================================================= -->
 */











/* =========================================
   ISOLATED CONTEST PRIZE SECTION
   No body / global CSS modifications
========================================= */

.contest-prize-section {
    --contest-bg: #031e24;
    --contest-card: #062f38;
    --contest-border: #066163;
    --contest-green: #00f3ab;
    --contest-green-dark: #00b894;
    --contest-muted: #598e96;
    width: 100%;
    box-sizing: border-box;
    color: #f1f5f9;
}

    .contest-prize-section *,
    .contest-prize-section *::before,
    .contest-prize-section *::after {
        box-sizing: border-box;
    }


/* Main wrapper */

.contest-prize-container {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


/* Cards */

.contest-prize-card {
    width: 100%;
    min-width: 0;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--contest-card);
    border: 1px solid var(--contest-border);
    border-radius: 16px;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.65), 0 0 15px rgba(0, 245, 160, 0.03);
}


/* Header */

.contest-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .contest-card-header h2 {
        margin: 0;
        color: var(--contest-green);
        font-size: 1.3rem;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .contest-card-header p {
        margin: 3px 0 0;
        color: var(--contest-muted);
        font-size: 1.1rem;
        line-height: 1.4;
        font-style: italic;
    }


/* Badge */

.contest-badge {
    flex-shrink: 0;
    padding: 5px 15px;
    background: #031b1f;
    border: 1px solid #0a3b42;
    border-radius: 150px;
    color: #00dca6;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.05em;
}


/* Podium */

.contest-podium {
    width: 100%;
    height: 208px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 32px 4px 0px 4px;
}

.contest-podium-three {
    max-width: 340px;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    gap: 12px;
}

.contest-podium-column {
    height: 100%;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transition: transform 0.25s ease;
}

    .contest-podium-column:hover {
        transform: translateY(-4px);
    }


/* Amount */

.contest-prize-amount {
    display: block;
    margin-bottom: 6px;
    color: var(--contest-green);
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
}


/* Bars */

.contest-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px;
    border-radius: 12px 12px 0 0;
    transform-origin: bottom;
    transform: scaleY(0);
    opacity: 0;
}


/* Bar heights */

.contest-bar-4 {
    height: 96px;
    background: linear-gradient( 180deg, #116979 0%, #0c4e5a 45%, rgba(2, 35, 41, 0.8) 100% );
    /* box-shadow: 0 0 10px rgba(17, 105, 121, 0.2); */
}

.contest-bar-2 {
    height: 123px;
    background: linear-gradient(180deg, #9ef01a 0%, #70e000 40%, rgba(3, 49, 44, 0.6) 100%);
    /* box-shadow: 0 0 15px rgba(158, 240, 26, 0.25); */
}

.contest-bar-1 {
    height: 176px;
    background: linear-gradient( 180deg, #00f3ab 0%, #00b894 40%, rgba(2, 45, 49, 0.6) 100% );
    /* box-shadow: 0 0 20px rgba(0, 243, 171, 0.35); */
}

.contest-bar-3 {
    height: 112px;
    background: linear-gradient( 180deg, #38ef7d 0%, #11998e 45%, rgba(2, 40, 48, 0.7) 100% );
    /* box-shadow: 0 0 15px rgba(56, 239, 125, 0.2); */
}


/* Laurel */

.contest-laurel {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
    color: rgb(4 29 33);
    opacity: 0;
    transform: translateY(6px);
}

    .contest-laurel svg {
        width: 75px;
        height: 67px;
        display: block;
        margin-top: -10px;
    }

    .contest-laurel span {
        margin-top: -2px;
        color: #000000;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 500;
    }


/* Footer */

.contest-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0px;
    padding-top: 14px;
    border-top: 3px solid #0a4d574d;
}

    .contest-card-footer span {
        color: #00dca6;
        font-size: 1.1rem;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: 0.08em;
    }

    .contest-card-footer strong {
        color: var(--contest-green);
        font-size: 1.3rem;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -0.02em;
    }


/* =========================================
   ANIMATION
   Starts only after section enters viewport
========================================= */

.contest-prize-section.is-visible .contest-bar-1 {
    animation: contestRiseUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.contest-prize-section.is-visible .contest-bar-2 {
    animation: contestRiseUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.30s forwards;
}

.contest-prize-section.is-visible .contest-bar-3 {
    animation: contestRiseUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

.contest-prize-section.is-visible .contest-bar-4 {
    animation: contestRiseUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.60s forwards;
}


/* Amount animations */

.contest-prize-section.is-visible .contest-podium-column:nth-child(1)
.contest-prize-amount {
    animation: contestFadeIn 0.5s ease-out 0.55s forwards;
}

.contest-prize-section.is-visible .contest-podium-column:nth-child(2)
.contest-prize-amount {
    animation: contestFadeIn 0.5s ease-out 0.70s forwards;
}

.contest-prize-section.is-visible .contest-podium-column:nth-child(3)
.contest-prize-amount {
    animation: contestFadeIn 0.5s ease-out 0.85s forwards;
}

.contest-prize-section.is-visible .contest-podium-column:nth-child(4)
.contest-prize-amount {
    animation: contestFadeIn 0.5s ease-out 1s forwards;
}


/* Laurel animations */

.contest-prize-section.is-visible .contest-podium-column:nth-child(1)
.contest-laurel {
    animation: contestFadeIn 0.5s ease-out 0.55s forwards;
}

.contest-prize-section.is-visible .contest-podium-column:nth-child(2)
.contest-laurel {
    animation: contestFadeIn 0.5s ease-out 0.70s forwards;
}

.contest-prize-section.is-visible .contest-podium-column:nth-child(3)
.contest-laurel {
    animation: contestFadeIn 0.5s ease-out 0.85s forwards;
}

.contest-prize-section.is-visible .contest-podium-column:nth-child(4)
.contest-laurel {
    animation: contestFadeIn 0.5s ease-out 1s forwards;
}


@keyframes contestRiseUp {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    70% {
        transform: scaleY(1.03);
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes contestFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (max-width: 767px) {
    .txt-top-con h3 {
        font-size: 1.2rem !important;
    }

    .shop2-img, .shop1-img {
        display: none;
    }

    .contest-prize-section {
        padding: 30px 12px;
    }

    .contest-prize-container {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contest-prize-card {
        padding: 18px;
    }

    .contest-card-header h2 {
        font-size: 19px;
    }

    .contest-badge {
        font-size: 10px;
        padding: 5px 8px;
    }

    .contest-podium {
        height: 205px;
    }

    .contest-bar-1 {
        height: 170px;
    }

    .contest-bar-2 {
        height: 138px;
    }

    .contest-bar-3 {
        height: 108px;
    }

    .contest-bar-4 {
        height: 92px;
    }
}


@media (max-width: 420px) {

    .contest-prize-section {
        padding-left: 8px;
        padding-right: 8px;
    }

    .contest-prize-card {
        padding: 15px;
    }

    .contest-card-header {
        gap: 8px;
    }

    .contest-badge {
        font-size: 9px;
        letter-spacing: 0.02em;
    }

    .contest-podium {
        gap: 5px;
        padding-left: 0;
        padding-right: 0;
    }

    .contest-podium-three {
        gap: 7px;
    }

    .contest-laurel svg {
        width: 36px;
        height: 36px;
    }

    .contest-card-footer strong {
        font-size: 17px;
    }
}


/* Respect reduced-motion preference */

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

    .contest-prize-section .contest-bar,
    .contest-prize-section .contest-prize-amount,
    .contest-prize-section .contest-laurel {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}




/* 
 =========================================================
   MARTSI PRODUCTS SECTION
   Fully Scoped CSS
   Does NOT affect body / other sales-page elements
========================================================= */

.martsi-products-section {
    --martsi-text: #334155;
    --martsi-heading: #0f172a;
    --martsi-border: #e2e8f0;
    --martsi-cyan: #0ea5e9;
    --martsi-blue: #2563eb;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient( 135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100% );
    color: var(--martsi-text);
    isolation: isolate;
}


/* =========================================================
   CONTAINER
========================================================= */

.martsi-products-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


/* =========================================================
   AMBIENT GLOWS
========================================================= */

.martsi-ambient {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: .8;
}

.martsi-ambient-one {
    top: 2%;
    left: 10%;
    width: 550px;
    height: 550px;
    background: radial-gradient( circle, rgba(14, 165, 233, .12) 0%, rgba(248, 250, 252, 0) 70% );
    animation: martsiAmbientOne 10s ease-in-out infinite alternate;
}

.martsi-ambient-two {
    right: 5%;
    bottom: 8%;
    width: 600px;
    height: 600px;
    background: radial-gradient( circle, rgba(99, 102, 241, .12) 0%, rgba(248, 250, 252, 0) 70% );
    animation: martsiAmbientTwo 12s ease-in-out infinite alternate;
}

@keyframes martsiAmbientOne {

    0% {
        transform: translate(0, 0) scale(1);
        opacity: .8;
    }

    50% {
        transform: translate(40px, 30px) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-30px, 20px) scale(.95);
        opacity: .8;
    }
}

@keyframes martsiAmbientTwo {

    0% {
        transform: translate(0, 0) scale(1);
        opacity: .7;
    }

    50% {
        transform: translate(-35px, -40px) scale(1.15);
        opacity: 1;
    }

    100% {
        transform: translate(25px, -20px) scale(.9);
        opacity: .7;
    }
}


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

.martsi-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.martsi-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #155e75;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
    background-image: linear-gradient( 90deg, #ecfeff, #cffafe, #ffffff, #cffafe, #ecfeff );
    background-size: 200% 100%;
    animation: martsiBadgeShimmer 6s linear infinite;
}

.martsi-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #06b6d4;
    animation: martsiBadgePing 1.8s ease-in-out infinite;
}

@keyframes martsiBadgePing {

    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.45);
        opacity: .55;
    }
}

@keyframes martsiBadgeShimmer {

    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.martsi-section-title {
    margin: 0;
    color: var(--martsi-heading);
    font-size: clamp(32px, 5vw, 60px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.035em;
}

.martsi-title-line {
    width: 96px;
    height: 6px;
    margin: 24px auto 0;
    border-radius: 999px;
    background: linear-gradient( 90deg, transparent, #06b6d4, transparent );
    transition: width .5s ease;
}

.martsi-section-header:hover .martsi-title-line {
    width: 140px;
}


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

.martsi-products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.martsi-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: 38px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--martsi-border);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .04), 0 8px 10px -6px rgba(0, 0, 0, .04);
    transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
    will-change: transform;
}

    .martsi-product-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 22px 35px -8px rgba(15, 23, 42, .09), 0 12px 20px -4px rgba(14, 165, 233, .08);
    }


/* =========================================================
   CARD CONTENT
========================================================= */

.martsi-card-content {
    flex: 1;
}

.martsi-card-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.martsi-product-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.martsi-badge-cyan {
    color: #0e7490;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    background-image: linear-gradient( 90deg, #ecfeff, #cffafe, #ffffff, #cffafe, #ecfeff );
    background-size: 200% 100%;
    animation: martsiBadgeShimmer 6s linear infinite;
}

.martsi-product-title {
    margin: 0 0 26px;
    color: #0f172a;
    font-size: clamp(30px, 3vw, 33px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
}


/* =========================================================
   FEATURES
========================================================= */

.martsi-feature-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.martsi-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #475569;
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 500;
    transition: transform .25s ease, color .25s ease;
}

    .martsi-feature-item:hover {
        transform: translateX(4px);
        color: #0f172a;
    }

.martsi-check-icon {
    display: flex;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin-top: 2px;
    color: #0891b2;
    transition: transform .2s ease;
}

.martsi-feature-item:hover .martsi-check-icon {
    transform: scale(1.15);
}

.martsi-check-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.martsi-cta-box {
    padding-top: 24px;
    margin-top: auto;
    border-top: 1px solid #e2e8f0;
}

.martsi-sales-label {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.martsi-sales-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    overflow: hidden;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

    .martsi-sales-link::before {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent );
        transform: skewX(-20deg);
    }

    .martsi-sales-link:hover::before {
        left: 150%;
        transition: left .85s cubic-bezier(.4, 0, .2, 1);
    }

    .martsi-sales-link span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .martsi-sales-link svg {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .martsi-sales-link:hover svg {
        transform: translate(5px, -3px);
    }

.martsi-sales-light {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}

    .martsi-sales-light:hover {
        color: #0891b2;
        background: #ecfeff;
        border-color: #06b6d4;
        box-shadow: 0 8px 20px rgba(6, 182, 212, .1);
    }


/* =========================================================
   IMAGE CARDS
========================================================= */

.martsi-image-card {
    position: relative;
    min-height: 420px;
    padding: 20px;
    overflow: hidden;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .04), 0 8px 10px -6px rgba(0, 0, 0, .04);
    transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
    will-change: transform;
}

    .martsi-image-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 24px 38px -10px rgba(15, 23, 42, .12), 0 12px 20px -4px rgba(37, 99, 235, .08);
    }

.martsi-image-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 390px;
    padding: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: #05636d;
}

    .martsi-image-inner.sec {
        background: #48339a;
    }

    .martsi-image-inner.thri {
        background: #c11c68;
    }

    .martsi-image-inner.four {
        background: #168caa;
    }

    .martsi-image-inner.five {
        background: #f18101;
    }

.martsi-product-image {
    width: 100%;
    height: 100%;
    min-height: 390px;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    transition: transform .7s ease;
}

.martsi-image-card:hover .martsi-product-image {
    transform: scale(1.05);
}

.martsi-image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( to top, rgba(15, 23, 42, .6), transparent 55% );
    transition: opacity .3s ease;
}

.martsi-image-card:hover .martsi-image-overlay {
    opacity: .85;
}


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

.martsi-image-label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transition: transform .3s ease;
}

.martsi-image-card:hover .martsi-image-label {
    transform: translateY(-2px);
}

.martsi-image-label-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #1e293b;
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
}

.martsi-image-label-right {
    flex: 0 0 auto;
    color: #64748b;
    font-family: monospace;
    font-size: 12px;
    font-weight: 500;
}

.martsi-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    animation: martsiStatusPulse 2s ease-in-out infinite;
}

.martsi-cyan-dot {
    background: #06b6d4;
    box-shadow: 0 0 8px rgba(6,182,212,.35);
}

.martsi-blue-dot {
    background: #2563eb;
    box-shadow: 0 0 8px rgba(37,99,235,.35);
}

@keyframes martsiStatusPulse {

    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}


/* =========================================================
   PRO CARD
========================================================= */

.martsi-pro-card {
    border-color: #bfdbfe;
}

    .martsi-pro-card:hover {
        border-color: #60a5fa;
    }

.martsi-pro-badges {
    align-items: center;
}

.martsi-badge-pro {
    color: #ffffff;
    background: linear-gradient( 90deg, #2563eb, #4f46e5, #2563eb );
    background-size: 200% auto;
    border: 1px solid rgba(37,99,235,.2);
    box-shadow: 0 0 10px rgba(37,99,235,.22);
    animation: martsiProGlow 3s ease-in-out infinite alternate;
}

@keyframes martsiProGlow {

    from {
        box-shadow: 0 0 8px rgba(37,99,235,.2);
    }

    to {
        box-shadow: 0 0 18px rgba(37,99,235,.45);
    }
}

.martsi-unlimited-badge {
    padding: 4px 10px;
    border-radius: 5px;
    color: #1d4ed8;
    background: linear-gradient( 90deg, #eff6ff, #dbeafe, #ffffff, #dbeafe, #eff6ff );
    background-size: 200% 100%;
    border: 1px solid #bfdbfe;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    animation: martsiBadgeShimmer 6s linear infinite;
}

.martsi-blue-check {
    color: #2563eb;
}

.martsi-sales-pro {
    color: #ffffff;
    background: linear-gradient( 90deg, #2563eb, #4f46e5, #2563eb );
    background-size: 200% auto;
    border: 1px solid rgba(37,99,235,.2);
    box-shadow: 0 7px 18px rgba(37,99,235,.2);
}

    .martsi-sales-pro:hover {
        color: #ffffff;
        background-position: right center;
        box-shadow: 0 12px 25px rgba(37,99,235,.25);
    }


/* =========================================================
   FLOATING ANIMATION
========================================================= */

.martsi-floating-one {
    animation: martsiFloatOne 5.5s ease-in-out infinite alternate;
}

.martsi-floating-two {
    animation: martsiFloatTwo 6.2s ease-in-out .8s infinite alternate;
}

@keyframes martsiFloatOne {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-7px);
    }
}

@keyframes martsiFloatTwo {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-7px);
    }
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.martsi-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

    .martsi-reveal.martsi-revealed {
        opacity: 1;
        transform: translateY(0);
    }


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

@media (max-width: 900px) {

    .martsi-products-section {
        padding: 65px 18px;
    }

    .martsi-products-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .martsi-product-card {
        padding: 30px;
    }

    .martsi-image-card {
        min-height: 380px;
    }

    .martsi-image-inner,
    .martsi-product-image {
        min-height: 350px;
    }
}


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

@media (max-width: 600px) {

    .martsi-products-section {
        padding: 55px 14px;
    }

    .martsi-section-header {
        margin-bottom: 40px;
    }

    .martsi-section-title {
        font-size: 32px;
        line-height: 1.15;
    }

    .martsi-product-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .martsi-product-title {
        font-size: 25px;
        margin-bottom: 22px;
    }

    .martsi-feature-item {
        font-size: 15px;
    }

    .martsi-image-card {
        min-height: 300px;
        padding: 10px;
        border-radius: 16px;
    }

    .martsi-image-inner,
    .martsi-product-image {
        min-height: 280px;
    }

    .martsi-image-label {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 9px 10px;
    }

    .martsi-image-label-left {
        font-size: 10px;
    }

    .martsi-image-label-right {
        font-size: 10px;
    }

    .martsi-card-badge-row {
        align-items: flex-start;
    }

    .martsi-pro-badges {
        flex-wrap: wrap;
    }

    .martsi-unlimited-badge {
        font-size: 9px;
    }
}


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

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

    .martsi-products-section *,
    .martsi-products-section *::before,
    .martsi-products-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .martsi-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}















/* <!-- SVG Styles --> */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&amp;display=swap');

.martsi-animated-container {
    animation: martsiFloatMotion 3.6s ease-in-out infinite alternate;
    transform-origin: 300px 120px;
}
.martsi-callout-title{
  font-family:'Caveat',cursive,sans-serif;
    font-size:38px;
    font-weight:700;
    font-style:italic;
    fill:#00D2FF;
    text-anchor:middle;
    dominant-baseline:middle;
    filter:url(#martsi-neon-glow);
}

.martsi-dashed-arrow {
    fill: none;
    stroke: #7DF9FF;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-dasharray: 6 5;
    animation: martsiDashFlow 1.4s linear infinite;
    filter: drop-shadow( 0 0 6px rgba(0, 229, 255, 0.85) );
}

.martsi-arrow-tip {
    fill: none;
    stroke: #7DF9FF;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow( 0 0 5px rgba(0, 229, 255, 0.85) );
}

@keyframes martsiFloatMotion {
    0% {
        transform: translateY(-5px) rotate(-1deg);
    }

    50% {
        transform: translateY(4px) rotate(1deg);
    }

    100% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes martsiDashFlow {
    to {
        stroke-dashoffset: -22;
    }
}















/* ==========================================
   CYRIL PROFILE CARD
   Completely isolated CSS
========================================== */

.cyril-profile-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* Card */
.cyril-contact-card {
    width: 100%;
    max-width: 100%;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}

/* Top bar */
.cyril-card-top-bar {
    width: 100%;
    height: 50px;
    background: #17839f;
}

/* Main content */
.cyril-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 28px 28px;
    box-sizing: border-box;
}

/* Left column */
.cyril-contact-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 8px;
    min-width: 0;
    width: 100%;
}

/* Name */
.cyril-person-name {
    margin: 0;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 3.15rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #0a263d;
    font-weight: 700;
    margin-bottom: 35px;
}

/* Badges */
.cyril-badges-list {
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    justify-content: start;
    align-items: start;
}

/* Individual badge */
.cyril-badge {
    width: auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 18px 150px 18px 15px;
    border-radius: 11px;
    box-sizing: border-box;
    font-size: 1.7rem;
    font-weight: 700;
    color: #273849;
    letter-spacing: -0.01em;
    transition: transform 0.15s ease;
}

    .cyril-badge:hover {
        transform: translateY(-2px);
    }

/* Badge backgrounds */
.cyril-badge-facebook {
    background: #dbeaff;
}

.cyril-badge-skype {
    background: #d3f3fd;
}

.cyril-badge-email {
    background: #ffdcd7;
}

/* Social icons */
.cyril-social-icon {
    width: 40px;
    height: 40px;
    min-width: 24px;
    margin-right: 10px;
    display: block;
}

/* Email */
.cyril-email-text {
    white-space: nowrap;
}

/* Profile image wrapper */
.cyril-profile-photo {
    width: 300px;
    /* height: 200px; */
    flex: 0 0 300px;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid #d2eef7;
    box-shadow: 0 4px 14px rgba(10, 38, 61, 0.08);
    position: relative;
    box-sizing: border-box;
}

/* Profile image */
.cyril-profile-photo-img {
    width: 320px;
    max-width: 100%;
}


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

@media (max-width: 600px) {

    .cyril-profile-section {
        padding: 25px 15px;
    }

    .cyril-contact-card {
        width: 100%;
        max-width: 480px;
    }

    .cyril-card-content {
        padding: 20px;
        gap: 15px;
    }

    .cyril-person-name {
        font-size: 1.9rem;
    }

    .cyril-badges-list {
        width: 190px;
    }

    .cyril-profile-photo {
        width: 160px;
        flex-basis: 160px;
        height: 190px;
    }
}


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

@media (max-width: 480px) {

    .cyril-profile-section {
        padding: 20px 12px;
    }

    .cyril-contact-card {
        border-radius: 20px;
    }

    .cyril-card-top-bar {
        height: 38px;
    }

    .cyril-card-content {
        padding: 18px 15px 20px;
        gap: 10px;
    }

    .cyril-contact-details {
        height: 180px;
        flex: 1;
    }

    .cyril-person-name {
        font-size: 1.55rem;
    }

    .cyril-badges-list {
        width: 100%;
        max-width: 185px;
        gap: 7px;
    }

    .cyril-badge {
        min-height: 37px;
        padding: 6px 9px;
        font-size: 12px;
        border-radius: 8px;
    }

    .cyril-social-icon {
        width: 21px;
        height: 21px;
        min-width: 21px;
        margin-right: 7px;
    }

    .cyril-email-text {
        font-size: 11px;
    }

    .cyril-profile-photo {
        width: 125px;
        height: 180px;
        flex-basis: 125px;
        border-radius: 15px;
    }

    .cyril-profile-photo-img {
        transform: scale(0.92);
        transform-origin: top left;
    }
}


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

@media (max-width: 360px) {

    .cyril-card-content {
        padding: 15px 12px 18px;
        gap: 8px;
    }

    .cyril-contact-details {
        height: 165px;
    }

    .cyril-person-name {
        font-size: 1.35rem;
    }

    .cyril-badges-list {
        max-width: 160px;
    }

    .cyril-badge {
        font-size: 10.5px;
        padding: 5px 7px;
    }

    .cyril-social-icon {
        width: 19px;
        height: 19px;
        min-width: 19px;
        margin-right: 5px;
    }

    .cyril-email-text {
        font-size: 9.5px;
    }

    .cyril-profile-photo {
        width: 105px;
        flex-basis: 105px;
        height: 165px;
    }
}

@media (max-width:767px) {
    .your-svg-wrapper {
        width: 100%;
        left: 0px !important;
    }
}


/* ================================
   POPUP IMAGE SCROLL ANIMATION
================================ */

.popup-img {
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

    .popup-img.is-visible {
        opacity: 1;
        transform: scale(1);
    }


















/*<!-- SVG Styles -->*/
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&amp;display=swap');

.martsi-animated-container {
    animation: martsiFloatMotion 3.6s ease-in-out infinite alternate;
    transform-origin: 300px 120px;
}

.martsi-callout-title {
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 40px;
    font-weight: 700;
    font-style: italic;
    fill: #00D2FF;
    text-anchor: middle;
    dominant-baseline: middle;
    filter: url(#martsi-neon-glow);
}

.martsi-dashed-arrow {
    fill: none;
    stroke: #7DF9FF;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-dasharray: 6 5;
    animation: martsiDashFlow 1.4s linear infinite;
    filter: drop-shadow( 0 0 6px rgba(0, 229, 255, 0.85) );
}

.martsi-arrow-tip {
    fill: none;
    stroke: #7DF9FF;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow( 0 0 5px rgba(0, 229, 255, 0.85) );
}

@keyframes martsiFloatMotion {
    0% {
        transform: translateY(-5px) rotate(-1deg);
    }

    50% {
        transform: translateY(4px) rotate(1deg);
    }

    100% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes martsiDashFlow {
    to {
        stroke-dashoffset: -22;
    }
}