/* ===================================
   MIKE GURDEN WEB SERVICES
   Boss Mode Baby Blue Theme
=================================== */


:root {

    --primary: #73c9ff;
    --primary-dark: #3eaaff;
    --soft-blue: #eef8ff;
    --background: #f8fcff;
    --text: #13304a;
    --muted: #64748b;
    --white: #ffffff;

    --radius: 24px;

}


/* GLOBAL */

* {
    scroll-behavior: smooth;
}


body {

    font-family: 'Poppins', sans-serif;
    background: var(--background);
    color: var(--text);
    overflow-x:hidden;

}


a {

    text-decoration:none;

}


/* ===================================
   BACKGROUND BLOBS
=================================== */


.bg-shape {

    position:fixed;
    border-radius:50%;
    filter:blur(80px);
    z-index:-1;
    opacity:.55;

}


.shape1 {

    width:450px;
    height:450px;
    background:#bce8ff;
    top:-150px;
    left:-150px;

    animation:float 10s infinite alternate;

}


.shape2 {

    width:400px;
    height:400px;
    background:#d9f5ff;
    right:-100px;
    top:300px;

    animation:float 12s infinite alternate-reverse;

}


.shape3 {

    width:350px;
    height:350px;
    background:#a6dbff;
    bottom:-100px;
    left:40%;

    animation:float 14s infinite alternate;

}


@keyframes float {

    from {
        transform:translateY(0);
    }

    to {
        transform:translateY(60px);
    }

}



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


.navbar {

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(15px);
    padding:18px 0;

}


.navbar-brand {

    color:var(--text);
    font-size:1.2rem;

}


.logo-circle {

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:45px;
    height:45px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:white;

    border-radius:50%;
    margin-right:10px;

}


.nav-link {

    color:var(--text);
    font-weight:500;
    margin:0 8px;

}


.nav-link:hover {

    color:var(--primary-dark);

}



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


.btn-primary {

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    border:none;

    box-shadow:
    0 10px 25px rgba(62,170,255,.35);

}


.btn-primary:hover {

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(62,170,255,.45);

}



.btn {

    transition:.3s ease;

}



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


.hero {

    position:relative;
    padding-top:120px;

}


.hero-tag {

    display:inline-block;

    background:white;

    padding:10px 20px;

    border-radius:50px;

    color:var(--primary-dark);

    font-weight:600;

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

    margin-bottom:25px;

}



.hero h1 {

    font-size:clamp(2.8rem,5vw,4.8rem);

    font-weight:800;

    line-height:1.1;

}


.gradient-text {

    background:
    linear-gradient(
        135deg,
        #3eaaff,
        #8bd8ff
    );

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

}



.hero p {

    color:var(--muted);

    font-size:1.15rem;

    max-width:600px;

    line-height:1.8;

}



/* ===================================
   HERO STATS
=================================== */


.hero-stats {

    display:flex;

    gap:40px;

    margin-top:50px;

}


.hero-stats h2 {

    font-weight:800;

    margin:0;

    color:var(--primary-dark);

}


.hero-stats small {

    color:var(--muted);

}



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


.hero-card {

    background:white;

    border-radius:30px;

    padding:15px;

    box-shadow:

    0 30px 80px rgba(0,0,0,.12);

    transform:rotate(3deg);

    animation:
    cardFloat 5s infinite alternate;

}


@keyframes cardFloat {

    from {
        transform:translateY(0) rotate(3deg);
    }

    to {
        transform:translateY(-20px) rotate(3deg);
    }

}



.browser-bar {

    height:35px;

    background:#f1f5f9;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:8px;

    padding-left:15px;

}


.browser-bar span {

    width:10px;
    height:10px;

    background:#94d9ff;

    border-radius:50%;

}



.browser-content {

    height:350px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        145deg,
        #ffffff,
        #eaf7ff
    );

    border-radius:20px;

}


.browser-content i {

    color:var(--primary-dark);

}


.browser-content h3 {

    margin-top:20px;

    font-weight:700;

}



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


@media(max-width:991px){


.hero {

    position:relative;
    padding-top:120px;

}


.hero p {

    margin:auto;

}


.hero-stats {

    justify-content:center;

    gap:25px;

}


.hero-card {

    margin-top:60px;

}


.navbar {

    padding:12px;

}


}



@media(max-width:576px){


.hero h1 {

    font-size:2.5rem;

}


.hero-stats {

    gap:15px;

}


.hero-stats h2 {

    font-size:1.5rem;

}


.btn-lg {

    width:100%;

    margin-bottom:15px;

}


}