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


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Inter',Arial,sans-serif;

    background:#05070c;

    color:white;

    overflow-x:hidden;

}


a{

    text-decoration:none;

    color:white;

}





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


.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;


    height:85px;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:0 8%;


    background:rgba(5,7,12,.75);

    backdrop-filter:blur(15px);


    z-index:999;


    border-bottom:1px solid rgba(255,255,255,.08);

}



.brand{

    font-size:30px;

    font-weight:900;

}



.brand span{

    color:#1bb3a9;

}



.navbar nav{

    display:flex;

    gap:35px;

}



.navbar nav a{

    color:#ddd;

    font-size:15px;

    transition:.3s;

}



.navbar nav a:hover{

    color:#1bb3a9;

}









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


.hero{

    height:100vh;

    min-height:700px;


    display:flex;

    align-items:center;

    justify-content:center;


    text-align:center;


    position:relative;


    background:

    linear-gradient(

    rgba(5,7,12,.55),

    rgba(5,7,12,.95)

    ),

    url("../img/hero.jpg");


    background-size:cover;

    background-position:center;

}



.hero-content{

    max-width:1000px;

    padding:20px;

}



.hero h1{

    font-size:clamp(45px,7vw,90px);

    line-height:1;


    font-weight:900;


    letter-spacing:-4px;

}



.hero h1 span{

    color:#1bb3a9;

}



.hero p{

    margin-top:35px;

    color:#ccc;


    font-size:22px;

    line-height:1.7;

}



.button{

    display:inline-block;


    margin-top:45px;


    padding:18px 55px;


    border-radius:50px;


    background:#1bb3a9;


    color:#001;


    font-weight:900;


    transition:.3s;

}



.button:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 50px rgba(27,179,169,.4);

}









/* =========================
SECTIONS
========================= */


.section{

    padding:120px 8%;

    text-align:center;

}



.dark{

    background:#0b1019;

}



.section h2{

    font-size:55px;

    font-weight:900;


    margin-bottom:30px;

    letter-spacing:-2px;

}



.section>p{

    max-width:900px;

    margin:auto;


    color:#aaa;

    font-size:20px;

    line-height:1.8;

}









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


.cards{


    margin-top:60px;


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));


    gap:30px;


}



.card{


    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );


    padding:40px 30px;


    border-radius:25px;


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


    transition:.4s;

}



.card:hover{


    transform:translateY(-10px);


    border-color:#1bb3a9;


}



.icon{


    font-size:50px;

    margin-bottom:20px;

}



.card h3{


    font-size:25px;


    margin-bottom:15px;

}



.card p{


    color:#aaa;

    line-height:1.7;

}











/* =========================
STEPS
========================= */


.steps{


    margin-top:60px;


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));


    gap:30px;

}



.step{


    background:#111722;


    padding:40px 25px;


    border-radius:25px;


    border:1px solid #202936;

}



.step strong{


    font-size:55px;


    color:#1bb3a9;

}



.step h3{


    margin:20px 0;

    font-size:24px;

}



.step p{


    color:#aaa;

}











/* =========================
FORM
========================= */


form{


    max-width:600px;


    margin:50px auto 0;


    display:flex;


    flex-direction:column;


    gap:20px;


}



input,
textarea{


    background:#111722;


    border:1px solid #273242;


    color:white;


    padding:18px;


    border-radius:15px;


    font-size:16px;

}



textarea{

    height:150px;

}



button{


    background:#1bb3a9;


    border:0;


    padding:18px;


    border-radius:50px;


    font-weight:900;


    font-size:18px;


    cursor:pointer;

}











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


footer{


    background:#000;


    text-align:center;


    padding:60px 20px;


    border-top:1px solid #222;

}



footer h2{


    margin-bottom:15px;


}









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


@media(max-width:768px){



.navbar{

    padding:0 20px;

}



.navbar nav{

    display:none;

}



.brand{

    font-size:22px;

}



.hero h1{

    font-size:45px;

    letter-spacing:-2px;

}



.hero p{

    font-size:17px;

}



.section{

    padding:80px 20px;

}



.section h2{

    font-size:38px;

}



}