/* ===================================
   FLOATING ANIMATION
=================================== */

@keyframes floating {

    0%{
        transform:
            translateY(0px);
    }

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

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

}

.phone-mockup{

    animation:
        floating 6s ease-in-out infinite;

}

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

@keyframes pulseGlow {

    0%{
        box-shadow:
            0 0 0 rgba(0,208,132,0);
    }

    50%{
        box-shadow:
            0 0 40px rgba(0,208,132,.45);
    }

    100%{
        box-shadow:
            0 0 0 rgba(0,208,132,0);
    }

}

.btn-primary{

    animation:
        pulseGlow 3s infinite;

}

/* ===================================
   HERO TITLE GRADIENT
=================================== */

@keyframes gradientText {

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

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

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

}

.hero h1 span{

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

    background-size:
        300% 300%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:
        gradientText 6s linear infinite;

}

/* ===================================
   FEATURE CARD GLOW
=================================== */

.feature-card:hover{

    box-shadow:
        0 0 35px rgba(0,208,132,.15),
        0 0 55px rgba(0,132,255,.12);

}

/* ===================================
   USECASE CARD GLOW
=================================== */

.usecase-grid div:hover{

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

}

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

.download-card{

    position:relative;

    overflow:hidden;

}

.download-card::before{

    content:"";

    position:absolute;

    top:-150px;
    left:-150px;

    width:300px;
    height:300px;

    background:
        radial-gradient(
            rgba(0,208,132,.25),
            transparent
        );

    filter:blur(80px);

}

.download-card::after{

    content:"";

    position:absolute;

    bottom:-150px;
    right:-150px;

    width:300px;
    height:300px;

    background:
        radial-gradient(
            rgba(0,132,255,.25),
            transparent
        );

    filter:blur(80px);

}

/* ===================================
   HERO BADGE
=================================== */

.hero-badge{

    position:relative;

    overflow:hidden;

}

.hero-badge::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

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

    animation:
        shine 4s infinite;

}

@keyframes shine {

    from{
        left:-120%;
    }

    to{
        left:150%;
    }

}

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

.stat-card{

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

}

.stat-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 0 25px rgba(0,208,132,.18);

}

/* ===================================
   FADE UP
=================================== */

@keyframes fadeUp {

    from{

        opacity:0;

        transform:
            translateY(30px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

.fade-up{

    animation:
        fadeUp .8s ease forwards;

}

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

@keyframes spinSlow {

    from{
        transform:
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg);
    }

}

.feature-card:hover img{

    animation:
        spinSlow 4s linear infinite;

}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(0,208,132,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 20%,
            rgba(0,132,255,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(255,140,0,.05),
            transparent 40%
        );

    pointer-events:none;

    z-index:-2;

}

/* ===================================
   GLASS HOVER EFFECT
=================================== */

.glass{

    transition:
        all .35s ease;

}

.glass:hover{

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

}

/* ===================================
   SWIPER ANIMATION
=================================== */

.swiper-slide{

    transition:
        transform .5s ease;

}

.swiper-slide-active{

    transform:
        scale(1.02);

}