/* GLOBAL */

:root{
  --bg:#15130f;
  --ink:#f3ede0;
  --ink-dim:#c9c0ac;
  --gold:#d3ac6e;
  --gold-deep:#a9824c;
}

*{
box-sizing:border-box;
}

body{

margin:0;
font-family:'Work Sans', sans-serif;
color:var(--ink);

height:100vh;
overflow:hidden;

/* layout vertical perfecto */

display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;

background:var(--bg);

}

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(180deg, rgba(21,19,15,0.55) 0%, rgba(21,19,15,0.22) 45%, rgba(21,19,15,0.68) 100%);

z-index:-1;

}

/* HEADER */

.main-header{

width:100%;

display:flex;
flex-direction:column;
align-items:center;
gap:6px;

padding-top:44px;

}

.logo{

font-family:'Cormorant Garamond', serif;
font-size:40px;
font-weight:600;

letter-spacing:6px;
text-transform:uppercase;

margin:0;

background:transparent;
color:var(--ink);

}

.tagline{

margin:0;

font-size:12px;
letter-spacing:2px;
text-transform:uppercase;

color:var(--gold);

}



/* VIEWER — now just a flex spacer, the 3D scene lives in the fixed
   full-screen #webgl canvas behind everything */

.viewer-section{

flex:1;
width:100%;

}



#webgl{

position:fixed;
inset:0;

width:100vw;
height:100vh;
display:block;

background:transparent;

z-index:-2;

}



/* loader */

#loader{

position:fixed;

top:50%;
left:50%;

transform:translate(-50%,-50%);

font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:var(--ink-dim);

z-index:5;

}

#loader::after{

content:"";

display:block;

margin:10px auto 0;

width:22px;
height:22px;

border-radius:50%;

border:2px solid rgba(243,237,224,0.2);
border-top-color:var(--gold);

animation:spin 0.9s linear infinite;

}

@keyframes spin{
to{ transform:rotate(360deg); }
}



/* PRODUCT SECTION */

.product-section{

text-align:center;

max-width:520px;

padding:0 24px 8px;

}



.product-section h2{

font-family:'Cormorant Garamond', serif;
font-size:30px;
font-weight:600;
margin:0 0 20px;
color:var(--ink);

}



.product-section p{

font-size:15px;
line-height:1.7;
margin:0 0 32px;

color:var(--ink-dim);

}



/* BUY BUTTON */

.buy-button{

display:inline-block;

background:linear-gradient(135deg, var(--gold), var(--gold-deep));

color:#20180c;

padding:15px 46px;

border-radius:2px;

text-decoration:none;

font-size:14px;
font-weight:600;

letter-spacing:2px;
text-transform:uppercase;

box-shadow:0 12px 28px rgba(0,0,0,0.35);

transition:transform 0.25s ease, box-shadow 0.25s ease;

}



.buy-button:hover{

transform:translateY(-3px);

box-shadow:0 16px 34px rgba(0,0,0,0.45);

}

.buy-button:active{

transform:translateY(-1px);

}



.trust-line{

margin:16px 0 0;

font-size:11px;
letter-spacing:1px;
text-transform:uppercase;

color:var(--ink-dim);
opacity:0.7;

}



/* FOOTER */

.site-footer{

width:100%;

padding:16px 0 20px;

text-align:center;

font-size:11px;
letter-spacing:1px;

color:var(--ink-dim);
opacity:0.55;

}



/* RESPONSIVE */

@media(max-width:700px){

.logo{

font-size:28px;
letter-spacing:4px;

}

.product-section h2{
font-size:24px;
}

.buy-button{
padding:14px 38px;
}

}