/* Minimal, elegant coming soon page */
:root{
  --fg:#ffffff;
  --fg-soft:rgba(255,255,255,.85);
  --shadow:rgba(0,0,0,.35);
  --radius:1.25rem;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg)}

.hero{
  position:relative;
  min-height:100%;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45)), url('../img/260524_BAGLIONETO_2113.jpg') center/cover no-repeat fixed;
  display:flex;
  align-items:center;
  justify-content:center;
}

.overlay{
  width:100%;
  max-width:1100px;
  padding:4rem 1.25rem;
  text-align:center;
  text-shadow:0 8px 30px var(--shadow);
}

.brand__title{font-weight:700; letter-spacing:.04em; margin:.25rem 0 0; font-size: clamp(2rem, 5vw, 4rem);}
.brand__tag{margin:.25rem 0 2rem; font-size:clamp(1rem,2.5vw,1.25rem); color:var(--fg-soft)}

.countdown .timer{
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(80px,1fr));
  gap:.75rem;
  max-width:720px;
}

.unit{
  backdrop-filter:saturate(120%) blur(4px);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 10px 30px var(--shadow);
}

.num{display:block; font-size:clamp(2rem, 6vw, 3rem); font-weight:800; line-height:1.1}
.label{display:block; margin-top:.25rem; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft)}

.note{margin:1rem auto 0; max-width:42rem; color:var(--fg-soft)}

.footer{margin-top:2.75rem; color:var(--fg-soft); font-size:.95rem}

@media (max-width:640px){
  .countdown .timer{grid-template-columns:repeat(2,minmax(120px,1fr)); gap:.5rem}
}