:root{
--bg:#050305;
--bg2:#060406;
--gold:#c9a84c;
--gold2:#e8c46a;
--red:#7a1e30;
--text:#ede8da;
}

*{box-sizing:border-box}

body{
margin:0;
font-family:DM Sans, sans-serif;
background:linear-gradient(180deg,var(--bg),var(--bg2));
color:var(--text);
min-height:100vh;
}

nav{
display:flex;
justify-content:space-between;
padding:18px 24px;
border-bottom:1px solid var(--gold);
align-items:center;
}

.logo{
font-family:Cinzel, serif;
font-size:1.8rem;
color:var(--gold2);
letter-spacing:1px;
}

nav a{
color:var(--text);
margin-left:12px;
text-decoration:none;
opacity:0.85;
}

nav a:hover{opacity:1;color:var(--gold2)}

.container{padding:24px;max-width:1000px;margin:auto}

.hero{
text-align:center;
padding:90px 20px;
}

h1{
font-family:Cinzel, serif;
font-size:3.5rem;
margin:0;
}

.btn{
background:linear-gradient(45deg,var(--gold),var(--gold2));
border:none;
padding:12px 20px;
border-radius:12px;
cursor:pointer;
font-weight:600;
color:#120d05;
margin-top:12px;
display:inline-block;
}

.card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(201,168,76,0.2);
padding:18px;
border-radius:14px;
margin:12px 0;
}

input{
padding:10px;
border-radius:10px;
border:1px solid var(--gold);
background:#0b070b;
color:var(--text);
font-size:1.1rem;
width:140px;
}

footer{
text-align:center;
padding:20px;
border-top:1px solid var(--gold);
margin-top:40px;
opacity:0.8;
}