/* Premium "Coming Soon" styles for Shashimasale */
:root{
  /* Palette inspired by the logo: deep maroon → orange → golden yellow */
  --bg-1:#1b0703; /* deep maroon/dark */
  --bg-2:#2a0f04; /* warm dark */
  --accent:#ff5a1f; /* orange-red */
  --accent-2:#ffbf00; /* golden yellow */
  --accent-shadow: 255,90,31; /* rgb for shadow rgba(var(--accent-shadow),0.16) */
  --glass:rgba(255,255,255,0.04);
  --muted:rgba(255,255,255,0.82);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{
  background:radial-gradient(1000px 600px at 10% 10%, rgba(255,90,31,0.08), transparent),
             radial-gradient(800px 500px at 90% 90%, rgba(255,191,0,0.06), transparent),
             linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#fff;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px;
}

.hero{position:relative;width:100%;max-width:1100px}
.bg{position:absolute;inset:0;filter:blur(40px) saturate(120%);opacity:0.6;pointer-events:none}

.content{position:relative;z-index:2;padding:48px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 20px 60px rgba(2,6,23,0.6);text-align:center;backdrop-filter:blur(6px) saturate(130%)}

.logo{width:96px;height:auto;margin:0 auto 12px;display:block}
.brand{font-size:clamp(28px,4.5vw,44px);margin:0;font-weight:700;letter-spacing:-0.6px}
.lead{color:var(--muted);margin:10px 0 22px;font-size:clamp(14px,2.2vw,18px)}

.countdown{display:flex;gap:14px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.countdown-item{background:var(--glass);padding:12px 14px;border-radius:10px;min-width:72px}
.countdown-item span{display:block;font-weight:700;font-size:20px}
.countdown-item small{display:block;color:rgba(255,255,255,0.7);font-size:12px;margin-top:6px}

.subscribe{display:flex;gap:10px;justify-content:center;margin:0 auto;max-width:520px}
.subscribe input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;outline:none}
.subscribe button{padding:12px 18px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(var(--accent-shadow),0.16)}

.message{margin-top:12px;min-height:22px;color:#a7f3d0}
.contact{margin-top:10px;color:rgba(255,255,255,0.9);font-weight:600}
.contact a{color:var(--accent-2);text-decoration:none;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,0.02)}
.contact a:hover{text-decoration:underline}
.small{margin-top:16px;color:rgba(255,255,255,0.6)}
.socials{margin-top:12px;display:flex;gap:12px;justify-content:center}
.socials a{color:rgba(255,255,255,0.9);text-decoration:none;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.02);transition:transform .18s,background .18s}
.socials a:hover{transform:translateY(-3px);background:rgba(255,255,255,0.04)}

/* Accessibility helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:600px){
  .subscribe{flex-direction:column}
  .countdown-item{min-width:56px;padding:10px}
}