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

html{

scroll-behavior:smooth;

}

body{

background:#000;

color:#fff;

font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;

overflow-x:hidden;

}

.hero{

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:40px;

text-align:center;

}

h1{

display:flex;

flex-direction:column;

font-size:clamp(4rem,12vw,9rem);

font-weight:700;

letter-spacing:.25em;

line-height:.9;

}

p{

margin-top:45px;

font-size:clamp(1rem,2vw,1.5rem);

color:#9d9d9d;

max-width:700px;

line-height:1.5;

}

.line{

margin-top:60px;

width:250px;

height:1px;

background:#555;

}
.hero{

opacity:0;

transform:translateY(40px);

transition:

opacity 1.4s ease,

transform 1.4s ease;

}

.loaded .hero{

opacity:1;

transform:translateY(0);

}