:root{
--bg:#0B0F19;
--card:#121826;
--gold:#C8A27A;
--text:#E5E7EB;
--muted:#9CA3AF;
}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:'Inter',sans-serif;
}

h1,h2,h3{
font-family:'Playfair Display',serif;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:28px 80px;
background:rgba(255,255,255,0.02);
backdrop-filter:blur(12px);
}

.logo img{
height:56px;
filter:brightness(1.8);
}

nav a{
margin-left:30px;
text-decoration:none;
color:white;
}

.hero{
height:85vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:0 20px;
}

.hero h1{
font-size:64px;
max-width:900px;
}

.hero p{
max-width:700px;
margin:auto;
line-height:1.8;
color:var(--muted);
}

.btn-primary{
display:inline-block;
margin-top:30px;
background:linear-gradient(135deg,var(--gold),#E7C8A0);
padding:14px 28px;
border-radius:10px;
color:black;
text-decoration:none;
font-weight:600;
border:none;
cursor:pointer;
}

.container{
padding:100px 80px;
}

.center{
text-align:center;
}

.subtext{
max-width:700px;
margin:auto;
line-height:1.8;
color:var(--muted);
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:40px;
margin-top:60px;
}

.card{
background:var(--card);
padding:24px;
border-radius:18px;
transition:0.3s;
cursor:pointer;
}

.card:hover{
transform:translateY(-10px);
}

.card p{
color:var(--muted);
}

model-viewer{
height:240px;
width:100%;
background:#111827;
border-radius:14px;
}

.total-bar{
margin-top:60px;
display:flex;
justify-content:space-between;
align-items:center;
}

.modal{
display:none;
position:fixed;
z-index:9999;
inset:0;
background:rgba(0,0,0,0.94);
backdrop-filter:blur(12px);
justify-content:center;
align-items:center;
}

.modal-content{
width:90%;
height:90%;
display:flex;
align-items:center;
justify-content:center;
gap:60px;
}

#modalViewer{
width:60%;
height:80vh;
}

.modal-info{
width:30%;
}

.modal-info h2{
font-size:48px;
}

.modal-info p{
line-height:1.8;
color:var(--muted);
}

.close{
position:absolute;
top:30px;
right:40px;
font-size:46px;
cursor:pointer;
}

.about-text{
line-height:2;
max-width:800px;
font-size:18px;
color:var(--muted);
}

.narrow{
max-width:1000px;
margin:auto;
}