/* ---------- base ---------- */
html,body{margin:0;padding:0;height:100%}

body{
  min-height:100vh;
  font-family:'Lexend',Arial,sans-serif;
  /* Duaein gradient (#B720DF → #E12220) */
  background:#B720DF;
  background:-webkit-linear-gradient(top,#B720DF 0%,#E12220 100%);
  background:-moz-linear-gradient(top,#B720DF 0%,#E12220 100%);
  background:linear-gradient(to bottom,#B720DF 0%,#E12220 100%);
  background-attachment:fixed;
  color:#fff;text-align:center
}

.container{padding:60px 20px 20px}

/* ---------- redirect ---------- */
.redirect-section h2{font-size:1.8em;margin-top:30px}

.spinner{
  margin:20px auto 0;
  border:6px solid #fff;
  border-top:6px solid rgba(255,255,255,.3);
  border-radius:50%;
  width:40px;height:40px;
  animation:spin 1s linear infinite
}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ---------- fallback ---------- */
.fallback-container{
  margin-top:10px;
  display:none;
  flex-direction:column;
  align-items:center;
  animation:fadeIn 1s ease-out forwards
}
.fallback-text{margin-bottom:25px;font-size:1.2em}

.buttons{display:flex;gap:30px;justify-content:center}
@media (max-width:600px){.buttons{flex-direction:column;gap:20px}}

.button{text-decoration:none;transition:transform .3s,opacity .3s}
.button:hover{opacity:.8;transform:scale(1.05)}

.store-logo{width:160px;height:auto}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}
                  to  {opacity:1;transform:translateY(0)}}