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

body{
font-family:'Poppins',sans-serif;
background:#0F1714;
color:#f5f1e8;
overflow:hidden;
}

.ambient-bg{
position:fixed;
inset:0;
z-index:-2;
background:
radial-gradient(circle at 20% 20%, rgba(212,175,55,.15), transparent 35%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,.06), transparent 30%),
linear-gradient(180deg,#0F1714,#101b17);
}

.progress-container{
position:fixed;
top:0;
left:0;
width:100%;
height:4px;
background:rgba(255,255,255,.05);
z-index:999;
}

.progress-fill{
height:100%;
width:16.6%;
background:#A8C3A0;
transition:.6s;
}

.screen{
position:absolute;
inset:0;
display:flex;
justify-content:center;
align-items:center;
padding:24px;

opacity:0;
pointer-events:none;

transform:
translateY(60px)
scale(.97);

transition:
opacity .8s,
transform .8s;
}

.screen.active{
opacity:1;
pointer-events:auto;
transform:
translateY(0)
scale(1);
}


.glass{
width:100%;
max-width:450px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
border-radius:32px;
padding:32px 24px;
text-align:center;
box-shadow:
0 20px 60px rgba(0,0,0,.4);
}

.badge{
display:inline-block;
padding:8px 16px;
border-radius:50px;
background:rgba(212,175,55,.15);
color:#A8C3A0;
font-size:.8rem;
margin-bottom:20px;
}

h1{
font-family:'Playfair Display',serif;
font-size:3rem;
margin-bottom:20px;
}

h2{
font-family:'Playfair Display',serif;
font-size:2rem;
margin-bottom:16px;
}

.subtitle{
line-height:1.8;
margin-bottom:30px;
color:#c8cfc7;
}

p{
line-height:1.8;
color:#d8ddd6;
}

.photo{
width:100%;
height:320px;
object-fit:cover;

border-radius:28px;

margin-bottom:20px;

box-shadow:
0 25px 60px rgba(0,0,0,.45);

transition:.5s;
}

.photo:hover{
transform:
translateY(-5px)
scale(1.02);
}

.btn{
margin-top:30px;
border:none;
background:#A8C3A0;
color:#111;
font-weight:600;
padding:14px 26px;
border-radius:50px;
cursor:pointer;
transition:.3s;
font-size:1rem;
}

.btn:hover{
transform:translateY(-2px);
}

.cards{
display:grid;
gap:14px;
margin-top:20px;
}

.card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:18px;
text-align:left;
transition:.3s;
}

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

.card-title{
font-weight:600;
margin-bottom:8px;
color:#A8C3A0;
}

.card-text{
font-size:.92rem;
color:#d6dbd5;
}

.countdown{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-top:24px;
}

.time-box{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:20px 10px;
}

.time-box span{
display:block;
font-size:2.2rem;
font-weight:700;
color:#A8C3A0;
}

.time-box small{
letter-spacing:1px;
text-transform:uppercase;
font-size:.75rem;
color:#c8cfc7;
}

.letter{
text-align:left;
margin-top:15px;
}

@media(max-width:480px){

.glass{
padding:26px 20px;
}

h1{
font-size:2.4rem;
}

h2{
font-size:1.8rem;
}

.photo{
height:260px;
}


.time-box span{

text-shadow:
0 0 15px rgba(212,175,55,.4);

}

.time-box{

background:
rgba(255,255,255,.04);

border:
1px solid rgba(212,175,55,.15);

box-shadow:
0 0 20px rgba(212,175,55,.08);

}

}

.particles{
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
overflow:hidden;
}

.particles span{
position:absolute;
width:4px;
height:4px;
background:#A8C3A0;
border-radius:50%;
opacity:.4;
animation:float 12s linear infinite;
}

.particles span:nth-child(1){
left:10%;
animation-delay:0s;
}

.particles span:nth-child(2){
left:30%;
animation-delay:2s;
}

.particles span:nth-child(3){
left:50%;
animation-delay:4s;
}

.particles span:nth-child(4){
left:70%;
animation-delay:6s;
}

.particles span:nth-child(5){
left:85%;
animation-delay:8s;
}

.particles span:nth-child(6){
left:95%;
animation-delay:10s;
}

@keyframes float{

0%{
transform:translateY(100vh);
opacity:0;
}

20%{
opacity:.5;
}

100%{
transform:translateY(-100px);
opacity:0;
}

}

.progress-dots{

position:fixed;
top:18px;
right:20px;

display:flex;
gap:6px;

z-index:999;

}

.dot{

width:8px;
height:8px;

border-radius:50%;

background:
rgba(255,255,255,.2);

transition:.4s;

}

.active-dot{

background:#A8C3A0;

}