*{box-sizing:border-box}
body{
margin:0;background:#080808;color:white;
font-family:Arial,sans-serif;
}
header{
position:fixed;top:0;left:0;right:0;
display:flex;justify-content:space-between;
padding:25px 6%;z-index:5;
}
.brand{font-size:38px;font-weight:900}
nav a{color:white;margin-left:25px;text-decoration:none}
.hero{
min-height:100vh;
display:flex;align-items:center;
padding:100px 6%;
gap:40px;
}
.hero-copy{width:50%}
.tag{letter-spacing:5px;color:#aaa}
h1{
font-size:clamp(90px,13vw,200px);
line-height:.8;margin:20px 0;
font-weight:900;
}
p{font-size:22px;color:#bbb}
.portrait{width:50%}
.portrait img{width:100%;max-height:750px;object-fit:cover}

.actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:35px;
align-items:center;
}
.btn,.ca-box{
border:1px solid #444;
padding:16px 22px;
background:#111;
color:white;
text-decoration:none;
font-weight:900;
}
.primary{
background:white;color:black;
}
.ca-box{
display:flex;
gap:12px;
align-items:center;
max-width:430px;
}
.ca-box strong{
max-width:180px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
button{
background:white;border:0;padding:8px 12px;font-weight:900;
cursor:pointer;
}
.card{
margin:30px 6%;
padding:40px;
background:#111;
border:1px solid #222;
}
h2{font-size:55px}
#dex-frame{
height:350px;
display:flex;
align-items:center;
justify-content:center;
color:#777;
}
@media(max-width:800px){
.hero{flex-direction:column}
.hero-copy,.portrait{width:100%}
}