.hero .hero-bg{background:none!important}
.hero-bg::after{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,27,64,.9),rgba(4,27,64,.52));content:""}
.hero-slide{position:absolute;inset:0;background-image:var(--hero-image);background-position:center;background-size:cover;opacity:0;transform:scale(1.035);transition:opacity 1.1s ease,transform 7s ease}
.hero-slide.is-active{opacity:1;transform:scale(1)}
.hero-content{z-index:1}
.hero-controls{position:absolute;top:0;right:0;display:flex;align-items:center;gap:9px}
.hero-dot{width:9px;height:9px;padding:0;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:transparent;transition:width .25s ease,background-color .25s ease}
.hero-dot.is-active{width:27px;border-radius:8px;background:var(--gold);border-color:var(--gold)}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:4px}
.count-up{font-variant-numeric:tabular-nums}
.app-download-content{display:block}
.app-download-visual{display:grid;justify-items:center}
.mobile-illustration{width:min(100%,440px);filter:drop-shadow(0 16px 20px rgba(10,35,75,.08))}
.mobile-art{display:block;width:100%;height:auto;overflow:visible}
.phone{transform-origin:221px 166px;animation:phone-float 4.5s ease-in-out infinite}
.art-float-left{transform-origin:91px 139px;animation:card-float 4s ease-in-out infinite}
.art-float-right{transform-origin:353px 205px;animation:card-float 4.8s ease-in-out -1.1s infinite}
.art-sparkle{transform-box:fill-box;transform-origin:center;animation:sparkle 2.8s ease-in-out infinite}
.sparkle-two{animation-delay:.7s}
.sparkle-three{animation-delay:1.3s}
@keyframes phone-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sparkle{0%,100%{opacity:.45;scale:.8}50%{opacity:1;scale:1.2}}
@media(max-width:500px){
  .hero .hero-content{position:absolute;top:32px;left:50%;transform:translateX(-50%)}
  .hero h1{font-size:clamp(30px,8vw,36px);letter-spacing:-1.5px}
  .hero-copy{font-size:15px;margin-bottom:0}
  .mobile-illustration{max-width:360px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide,.hero-dot{transition:none}
  .hero-slide{transform:none}
  .phone,.art-float-left,.art-float-right,.art-sparkle{animation:none}
}