/* ==========================================
   HERO BACKGROUND
========================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at 20% 20%,rgba(59,130,246,.18),transparent 35%),

        radial-gradient(circle at 80% 10%,rgba(34,197,94,.10),transparent 30%),

        radial-gradient(circle at 70% 70%,rgba(96,165,250,.15),transparent 40%);

    z-index:-2;

}

/* ==========================================
   FLOATING BROWSER
========================================== */

.browser-placeholder{

    animation:floatBrowser 5s ease-in-out infinite;

    box-shadow:

        0 20px 60px rgba(59,130,246,.25);

}

@keyframes floatBrowser{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================
   HERO TEXT
========================================== */

.hero-left h1{

    animation:slideLeft .9s ease;

}

.hero-left p{

    animation:slideLeft 1.1s ease;

}

.hero-buttons{

    animation:slideLeft 1.3s ease;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.download-btn,
.hero-buttons button:first-child{

    box-shadow:

        0 0 18px rgba(59,130,246,.35);

}

.download-btn:hover,
.hero-buttons button:first-child:hover{

    box-shadow:

        0 0 40px rgba(59,130,246,.7);

}

/* ==========================================
   FEATURE CARDS
========================================== */

.feature-card{

    transition:

        transform .35s,

        box-shadow .35s;

}

.feature-card:hover{

    box-shadow:

        0 20px 45px rgba(59,130,246,.18);

}

/* ==========================================
   PRICING CARDS
========================================== */

.price-card{

    transition:

        transform .35s,

        box-shadow .35s;

}

.price-card:hover{

    box-shadow:

        0 20px 50px rgba(59,130,246,.18);

}

/* ==========================================
   SCREENSHOTS
========================================== */

.shot{

    transition:.35s;

}

.shot:hover{

    transform:scale(1.04);

}

/* ==========================================
   FADE-IN ANIMATION
========================================== */

.hidden{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
   NAVBAR SCROLL
========================================== */

.scrolled{

    background:#081321 !important;

    box-shadow:

        0 5px 25px rgba(0,0,0,.35);

}

/* ==========================================
   PULSE DOWNLOAD BUTTON
========================================== */

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(59,130,246,.6);

    }

    70%{

        box-shadow:0 0 0 20px rgba(59,130,246,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(59,130,246,0);

    }

}

.download-btn{

    animation:pulse 2.5s infinite;

}