.hero-title{
position:relative;
display:inline-block;
padding:10px 24px 6px;
margin:0 auto 2px;
}

.names{
margin:0;
font-family:'Great Vibes', cursive;
font-size:clamp(122px, 15vw, 224px);
line-height:0.92;
font-weight:400;
letter-spacing:0.01em;
white-space:nowrap;
color:#4f473f;
text-align:center;
text-shadow:0 10px 24px rgba(91, 77, 65, 0.12);
}

.amp{
display:inline-block;
font-size:0.74em;
margin:0 0.14em;
font-weight:400;
color:#8a6d46;
line-height:1;
vertical-align:0.04em;
}

.wedding-date{
display:inline-flex;
align-items:center;
justify-content:center;
margin:10px 0 0;
padding:10px 18px;
font-family:'Libre Baskerville', serif;
letter-spacing:0.28em;
font-size:14px;
text-transform:uppercase;
color:#4f4337;
background:rgba(255,250,244,0.88);
border:1px solid rgba(138,109,70,0.26);
border-radius:999px;
box-shadow:0 10px 24px rgba(102,80,58,0.12);
backdrop-filter:blur(8px);
}

.hero-title::before{
content:"";
position:absolute;
inset:-24px -34px -12px;
background:radial-gradient(circle, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.46) 48%, rgba(255,255,255,0) 78%);
z-index:-1;
filter:blur(8px);
}

.hero-title::after{
content:"";
display:block;
width:120px;
height:1px;
margin:8px auto 0;
background:linear-gradient(90deg, rgba(138,109,70,0), rgba(138,109,70,0.85), rgba(138,109,70,0));
}

.hero{
position:relative;
padding:28px 20px 80px;
overflow:visible;
isolation:isolate;
}

.hero-title,
.invite,
#countdown{
position:relative;
z-index:4;
}

.hero h1{
font-size:48px;
margin-bottom:10px;
}

.hero h2{
font-size:22px;
font-weight:400;
margin-bottom:30px;
color:#555;
}

#countdown{
display:flex;
justify-content:center;
gap:12px;
margin-top:30px;
flex-wrap:wrap;
}

#countdown div{
background:rgba(255,250,244,0.9);
padding:15px 16px;
border-radius:18px;
border:1px solid rgba(138,109,70,0.18);
min-width:70px;
box-shadow:0 12px 26px rgba(91,77,65,0.1);
backdrop-filter:blur(10px);
}

#countdown span{
font-size:28px;
font-weight:600;
display:block;
color:#2f473a;
}

#countdown p{
margin:5px 0 0;
font-size:13px;
color:#65594c;
letter-spacing:0.04em;
text-transform:uppercase;
}

.invite{
margin-top:30px;
font-size:18px;
max-width:600px;
margin-left:auto;
margin-right:auto;
line-height:1.6;
padding:20px 24px;
background:rgba(255,250,244,0.74);
border:1px solid rgba(138,109,70,0.14);
border-radius:28px;
box-shadow:0 16px 34px rgba(91,77,65,0.08);
backdrop-filter:blur(8px);
}

.hero-slider{
position:relative;
z-index:1;
}

@media (max-width:768px){

.hero{
padding-top:28px;
}

.hero-title{
padding:8px 12px 6px;
}

.names{
font-size:clamp(66px, 18vw, 118px);
white-space:normal;
line-height:1;
}

.wedding-date{
padding:8px 14px;
letter-spacing:0.18em;
font-size:12px;
}

#countdown div{
min-width:78px;
padding:13px 14px;
}

.invite{
padding:16px 18px;
font-size:17px;
}

.amp{
margin:0 0.08em;
}

#countdown span{
font-size:22px;
}

}