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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
color:#fff;
overflow-x:hidden;
background:#000;
}

/* PRELOADER */
#preloader{
position:fixed;
inset:0;
background:#050505;
z-index:9999;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
transition:opacity .6s ease, visibility .6s ease;
}

#preloader img{
width:150px;
margin-bottom:18px;
animation:pulse 1.5s infinite;
}

#preloader p{
color:#c9a96e;
letter-spacing:2px;
font-size:14px;
}

#preloader.hide{
opacity:0;
visibility:hidden;
}

@keyframes pulse{
0%,100%{transform:scale(1);opacity:.85}
50%{transform:scale(1.08);opacity:1}
}

/* VIDEO BACKGROUND */
.video-bg video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
filter:brightness(0.98);
}

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to right, rgba(0,0,0,0.58) 35%, rgba(0,0,0,0.28) 100%);
z-index:2;
}

/* MAIN */
.container{
position:relative;
z-index:3;
min-height:100vh;
display:grid;
grid-template-columns:1fr 440px;
gap:50px;
align-items:center;
padding:70px 80px;
}

.logo{
width:170px;
margin-bottom:28px;
}

.top-text{
color:#c9a96e;
letter-spacing:4px;
margin-bottom:10px;
font-weight:500;
}

h1{
font-family:'Playfair Display',serif;
font-size:82px;
line-height:.95;
letter-spacing:1px;
}

.launch-date{
margin-top:16px;
color:#f1d99d;
font-weight:500;
letter-spacing:1px;
}

.desc{
margin:20px 0;
color:#e0e0e0;
max-width:520px;
line-height:1.7;
}

.countdown{
display:flex;
gap:24px;
margin:30px 0;
flex-wrap:wrap;
}

.time-box{
min-width:82px;
padding:16px 12px;
text-align:center;
background:rgba(255,255,255,.08);
border:1px solid rgba(201,169,110,.35);
border-radius:18px;
backdrop-filter:blur(8px);
}

.time-box span{
font-size:32px;
display:block;
font-weight:600;
}

.time-box p{
font-size:12px;
color:#cfcfcf;
margin-top:5px;
}

/* GOLD BUTTONS */
.buttons{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:12px;
}

.btn{
display:inline-block;
padding:14px 24px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.gold-btn{
background:linear-gradient(135deg,#c9a96e,#f0d28a,#b58b45);
color:#111;
box-shadow:0 10px 25px rgba(201,169,110,.25);
}

.gold-btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 32px rgba(201,169,110,.4);
}

.outline-btn{
border:1px solid #c9a96e;
color:#fff;
background:rgba(0,0,0,.2);
}

.outline-btn:hover{
background:#c9a96e;
color:#111;
}

.contact{
margin-top:28px;
color:#d6d6d6;
line-height:1.8;
}

/* PRODUCT PREVIEW */
.product-preview{
background:rgba(0,0,0,.38);
border:1px solid rgba(201,169,110,.28);
border-radius:28px;
padding:28px;
backdrop-filter:blur(12px);
box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.product-preview h2{
font-family:'Playfair Display',serif;
font-size:34px;
margin-bottom:22px;
color:#f0d28a;
}

.product-grid{
display:grid;
gap:18px;
}

.product-card{
padding:20px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
transition:.3s;
}

.product-card:hover{
transform:translateY(-5px);
border-color:#c9a96e;
}

.product-img{
font-size:38px;
margin-bottom:10px;
}

.product-card h3{
font-size:18px;
margin-bottom:8px;
}

.product-card p{
font-size:14px;
color:#d0d0d0;
line-height:1.6;
}

/* SOCIAL */
.social{
position:fixed;
top:30px;
right:40px;
z-index:4;
}

.social a{
margin-left:20px;
color:#fff;
text-decoration:none;
opacity:.78;
transition:.3s;
}

.social a:hover{
opacity:1;
color:#c9a96e;
}

/* WHATSAPP */
.whatsapp{
position:fixed;
bottom:30px;
right:30px;
background:#25D366;
padding:15px 25px;
border-radius:50px;
color:#fff;
text-decoration:none;
font-weight:bold;
z-index:5;
transition:.3s;
box-shadow:0 10px 25px rgba(37,211,102,.3);
}

.whatsapp:hover{
transform:scale(1.05);
}

/* TABLET */
@media(max-width:1100px){
.container{
grid-template-columns:1fr;
padding:90px 45px 45px;
}

.product-preview{
max-width:720px;
}
}

/* MOBILE FRIENDLY */
@media(max-width:700px){
body{
overflow-y:auto;
}

.container{
padding:95px 22px 100px;
gap:35px;
}

.logo{
width:135px;
}

h1{
font-size:48px;
}

.launch-date{
font-size:14px;
}

.desc{
font-size:14px;
}

.countdown{
gap:12px;
}

.time-box{
min-width:70px;
padding:12px 8px;
border-radius:14px;
}

.time-box span{
font-size:25px;
}

.buttons{
flex-direction:column;
align-items:flex-start;
}

.btn{
width:100%;
max-width:280px;
text-align:center;
}

.product-preview{
padding:20px;
border-radius:22px;
}

.product-preview h2{
font-size:28px;
}

.social{
top:22px;
right:18px;
}

.social a{
margin-left:10px;
font-size:13px;
}

.whatsapp{
right:18px;
bottom:18px;
padding:13px 20px;
font-size:14px;
}
}