/* ======================================================
   SkillUp4AI
   Coming Soon Landing Page
====================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

    background:
        linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
        url("background.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    color:#fff;

    min-height:100vh;

}

/*================================================*/

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

/*================================================*/

.content{

    width:min(900px,92vw);

    text-align:center;

    animation:fadeIn 1.4s ease;

}

/*================================================*/

.icon{

    width:350px;
     margin-top:40px; 
    margin-bottom:5px;

    opacity:.96;

}

/*================================================*/

.logo{

    width:min(1040px,85vw);

    max-width:100%;

    margin-bottom:1px;

}

/*================================================*/

h1{

    font-size:clamp(2rem,4vw,3.3rem);

    font-weight:600;

    line-height:1.2;

    margin-bottom:26px;

    text-shadow:0 2px 10px rgba(0,0,0,.35);

}

/*================================================*/

.lead{

    font-size:1.32rem;

    font-weight:500;

    margin-bottom:18px;

    color:#F2F2F2;

    text-shadow:0 2px 8px rgba(0,0,0,.35);

}

.description{

    max-width:760px;

    margin:auto;

    line-height:1.75;

    font-size:1.05rem;

    color:#E6E6E6;

    text-shadow:0 2px 8px rgba(0,0,0,.35);

}

/*================================================*/

.button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:55px;

    text-decoration:none;

    color:#1d1d1d;

    font-weight:600;

    letter-spacing:.4px;

    padding:18px 44px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #D5D5D5
        );

    border:1px solid rgba(255,255,255,.45);

    box-shadow:

        0 8px 24px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.85);

    transition:

        transform .3s,

        box-shadow .3s,

        filter .3s;

}

.button:hover,
.button:focus-visible{

    transform:translateY(-2px);

    filter:brightness(108%);

    box-shadow:

        0 14px 30px rgba(0,0,0,.45),

        inset 0 1px 0 rgba(255,255,255,.95);

}

.button:focus-visible{

    outline:3px solid rgba(255,255,255,.8);

    outline-offset:5px;

}

/*================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*================================================*/

@media (max-width:768px){

    .hero{

        padding:32px;

    }

    .icon{

        width:92px;
        margin-top:90px; 
        margin-bottom:1px;

    }

    .logo{

        width:92vw;

        margin-bottom:20px;

    }

    h1{

        font-size:2rem;

    }

    .lead{

        font-size:1.15rem;

    }

    .description{

        font-size:1rem;

        line-height:1.65;

    }

    .button{

        width:100%;

        max-width:340px;

        padding:18px;

    }

}

@media (prefers-reduced-motion:reduce){

    *{

        animation:none!important;

        transition:none!important;

    }

}