:root{
background-position: left center;
background-repeat: no-repeat;
}


.banner-right{
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
}


/* hero content sits centered within the banner area (overlay) */
.hero-content{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
padding:36px;
gap:14px;
}


.title{
margin:0;
font-size: clamp(22px, 3.2vw, 36px);
line-height:1.05;
max-width:58ch;
text-shadow: 0 6px 18px rgba(0,0,0,0.65);
}


.subtitle{
margin:0; color:var(--muted); max-width:56ch; font-size:16px
}


.waitlist-form{display:flex; gap:12px; margin-top:6px}
.waitlist-form input{
padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.03); color:#fff; min-width:240px; outline:none; font-size:15px
}


.waitlist-form button{
padding:12px 16px; border-radius:10px; border:0; cursor:pointer; font-weight:600;
background: linear-gradient(90deg, var(--accent) 0%, #34d399 100%);
color:#042018; box-shadow: 0 6px 18px rgba(52,211,153,0.18);
}


.meta{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.countdown{font-weight:600}
.small{font-size:12px;color:rgba(255,255,255,0.6)}


.site-footer{width:100%;max-width:var(--max-width);margin-top:28px;padding:12px 0;text-align:left;color:rgba(255,255,255,0.6)}


/* Responsive tweaks */
@media (max-width:800px){
.banner{grid-template-columns: 40% 60%}
.hero-content{padding:20px}
}


@media (max-width:520px){
.banner{grid-template-columns: 1fr; aspect-ratio: 2/1;}
.banner-left{height:60%;}
.banner-right{display:none}
.hero-content{align-items:center;text-align:center}
.waitlist-form{flex-direction:column;align-items:stretch}
}


/* subtle focus states */
input:focus{box-shadow:0 4px 18px rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.14)}
button:active{transform:translateY(1px)}