:root {

    --bg:#050505;
    --surface:#0D0D0D;
    --border:#1F1F1F;

    --text:#F4F4F4;
    --silver:#C8C8C8;
    --muted:#8B8B8B;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

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

}

nav{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 8%;

    border-bottom:1px solid var(--border);

}

nav img{

    height:55px;

}

nav ul{

    display:flex;

    list-style:none;

    gap:40px;

}

nav a{

    color:var(--silver);

    text-decoration:none;

    font-size:15px;

    transition:.25s;

}

nav a:hover{

    color:white;

}

.hero{

    max-width:900px;

    margin:auto;

    min-height:85vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:84px;

    font-weight:600;

    margin-bottom:15px;

}

.hero h2{

    color:var(--silver);

    font-size:22px;

    font-weight:400;

    margin-bottom:40px;

}

.hero p{

    font-size:20px;

    line-height:1.9;

    color:var(--muted);

    max-width:760px;

    margin-bottom:25px;

}

.button{

    display:inline-block;

    width:180px;

    text-align:center;

    padding:16px 30px;

    border:1px solid var(--silver);

    color:white;

    text-decoration:none;

    margin-top:20px;

    transition:.25s;

}

.button:hover{

    background:white;

    color:black;

}