/* =====================================
   LAST OF NOMADS
   Premium Apple Inspired Design
===================================== */


/* Reset */

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


html{
    scroll-behavior:smooth;
}


body{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

    background:#F5F5F7;

    color:#1D1D1F;

}


/* =====================================
   Background Effects
===================================== */


.gradient{

    position:fixed;

    border-radius:50%;

    filter:blur(120px);

    z-index:0;

    pointer-events:none;

}


.gradient-left{

    width:520px;

    height:520px;

    background:
    rgba(0,113,227,.18);

    top:-180px;

    left:-180px;

}


.gradient-right{

    width:500px;

    height:500px;

    background:
    rgba(175,82,222,.15);

    bottom:-200px;

    right:-150px;

}


/* subtle noise */

.noise{

    position:fixed;

    inset:0;

    opacity:.035;

    pointer-events:none;

    background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");

}



/* =====================================
   Hero
===================================== */


.hero{

    width:100%;

    max-width:820px;

    padding:40px;

    position:relative;

    z-index:2;

}


/* =====================================
   Glass Card
===================================== */


.card{

    background:

    rgba(255,255,255,.72);


    backdrop-filter:

    blur(40px);


    -webkit-backdrop-filter:

    blur(40px);


    border:

    1px solid rgba(255,255,255,.65);


    border-radius:40px;


    padding:

    80px 70px;


    text-align:center;


    box-shadow:

    0 30px 90px rgba(0,0,0,.08);


    animation:

    appear 1s cubic-bezier(.2,.8,.2,1);


}



/* =====================================
   Small Label
===================================== */


.eyebrow{

    font-size:12px;

    font-weight:600;

    letter-spacing:.35em;

    color:#86868B;

    margin-bottom:30px;

}



/* =====================================
   Title
===================================== */


h1{

    font-size:

    clamp(48px,8vw,86px);


    font-weight:700;


    letter-spacing:

    -0.065em;


    line-height:.95;


    margin-bottom:35px;


    color:#1D1D1F;

}



/* =====================================
   Description
===================================== */


.intro{

    max-width:650px;

    margin:auto;


    font-size:18px;


    line-height:1.9;


    font-weight:400;


    color:#515154;


    margin-bottom:50px;

}



/* =====================================
   Success Message
===================================== */


.success{

    background:

    rgba(52,199,89,.12);


    color:#1d7a3b;


    border:

    1px solid rgba(52,199,89,.25);


    border-radius:18px;


    padding:18px;


    margin-bottom:30px;


    line-height:1.7;


}



/* =====================================
   Form
===================================== */


form{

    max-width:460px;

    margin:auto;


    display:flex;

    flex-direction:column;

    gap:16px;

}



.field input{


    width:100%;


    height:58px;


    padding:

    0 22px;


    border-radius:16px;


    border:

    1px solid #D2D2D7;


    background:

    rgba(255,255,255,.85);


    font-size:16px;


    outline:none;


    transition:.35s;


}



.field input::placeholder{

    color:#86868B;

}



.field input:focus{


    border-color:#0071E3;


    box-shadow:

    0 0 0 5px rgba(0,113,227,.12);


}



/* =====================================
   Button
===================================== */


button{


    height:58px;


    border:none;


    border-radius:16px;


    background:#0071E3;


    color:white;


    font-size:17px;


    font-weight:600;


    cursor:pointer;


    transition:

    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;


}



button:hover{


    transform:

    translateY(-3px);


    background:#006EDC;


    box-shadow:

    0 20px 40px rgba(0,113,227,.3);


}


button:active{

    transform:scale(.98);

}



/* =====================================
   Footer
===================================== */


.divider{


    width:100%;


    height:1px;


    background:

    rgba(0,0,0,.08);


    margin:

    55px 0 25px;


}



.footer{


    display:flex;


    justify-content:space-between;


    color:#86868B;


    font-size:13px;


}



/* =====================================
   Animation
===================================== */


@keyframes appear{


    from{

        opacity:0;

        transform:

        translateY(40px)

        scale(.98);

    }


    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}



/* =====================================
   Mobile
===================================== */


@media(max-width:768px){


body{

    overflow:auto;

}



.hero{

    padding:20px;

}


.card{

    padding:

    50px 28px;


    border-radius:30px;

}



h1{

    font-size:48px;

}


.intro{

    font-size:16px;

    line-height:1.8;

}


.footer{

    flex-direction:column;

    gap:10px;

}


}



@media(max-width:420px){


h1{

    font-size:40px;

}


.card{

    padding:

    40px 22px;

}


}