*{box-sizing:border-box;}
html,body{
  height:100%;
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:#000;
  color:#fff;
  text-align:center;
}

.banner-wrap{
  margin-top:4vh;
  padding:0 20px;
}
.hero-text-top{
  font-size:clamp(30px,5vw,64px);
  font-weight:700;
  line-height:1.2;
}
.hero-text-top strong{font-size:clamp(42px,7vw,88px);font-weight:900;}

.phone-container{display:flex;justify-content:center;margin-top:2vh;}
.phone-img{width:min(80vw,700px);max-height:70vh;object-fit:contain;}

.downloads{
  margin-top:4vh;
  margin-bottom:6vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.stores{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:200px;
}

.store-badge{
  width:clamp(170px,25vw,260px);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.8));
}

/* Clickable banner with hover color change */
.shop-banner-link{ display:inline-block; }
.shop-banner{
  width:min(60vw,480px);
  height:auto;
  margin-top:20px;
  transition: filter .2s ease, transform .2s ease;
}
.shop-banner-link:hover .shop-banner,
.shop-banner-link:focus .shop-banner{
  filter: brightness(0.92) saturate(1.15) drop-shadow(0 6px 18px rgba(0,0,0,.9));
  transform: translateY(-1px);
  outline: none;
}

/* Responsive gap adjust */
@media(max-width:900px){.stores{gap:120px;}}
@media(max-width:600px){
  .stores{gap:40px;flex-wrap:wrap;}
  .store-badge{width:min(70vw,240px);}
  .shop-banner{width:70vw;}
}