/* App Download Card (scoped) */
.uea-dl {
  --elev: 0 25px 60px rgba(0, 0, 0, .28);
  --ease: cubic-bezier(.22,.61,.36,1);
  --muted: #e8f0ff;
  color: var(--text, #fff);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.uea-download-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  gap: 3.5rem;
  border-radius: 28px;
  border: 1.5px solid rgba(255, 150, 51, .28);
  padding: 2rem 1.75rem 2rem 2.25rem; /* ⬅️ reduced right padding by ~0.25rem (~4px) */
  box-shadow: var(--elev);
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% 10%, var(--overlay, rgba(255,255,255,.10)) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--bg-1, #0c43ab) 0%, var(--bg-2, #1e61eb) 100%);
}
/* Main card scroll animation: slide up from bottom */
.uea-download-card[data-card-reveal] {
  opacity: 0;
  transform: translateY(var(--card-reveal-distance, 100px));
  transition:
    opacity var(--card-reveal-duration, .8s) var(--ease),
    transform var(--card-reveal-duration, .8s) var(--ease);
  will-change: opacity, transform;
}
.uea-download-card[data-card-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Tilt transform - apply the rotation transforms that the tilt library sets via CSS variables */
.uea-download-card[data-tilt="on"] { 
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d; 
  perspective: 1200px; 
}
/* When both tilt and card reveal are active - combine transforms */
.uea-download-card[data-card-reveal][data-tilt="on"] {
  transform: translateY(var(--card-reveal-distance, 100px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.uea-download-card[data-card-reveal][data-tilt="on"].is-in {
  transform: translateY(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.uea-dl .left { display:flex; flex-direction:column; justify-content:center; z-index:2; }

/* Kicker */
.uea-dl .kicker{
  display:inline-flex; align-items:center; gap:.5rem; width:max-content;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,150,51,.22));
  border:1px solid rgba(255,255,255,.16);
  padding:.4rem .7rem; border-radius:999px;
}
.uea-dl .kicker .dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--accent,#FF9633); box-shadow:0 0 0 6px rgba(255,150,51,.14); animation: uea-blink 2s ease-in-out infinite; }

.uea-dl h1{
  color:var(--text, #fff);
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height:1.06; margin:.8rem 0 .6rem; letter-spacing:-.02em;
}
.uea-dl h1 .accent{
  background: linear-gradient(90deg, #ffd3aa, var(--accent,#FF9633));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 24px rgba(255,150,51,.18);
}

.uea-dl .sub{ color:var(--muted); font-size:clamp(1rem, 1.3vw, 1.125rem); max-width:38ch; margin:0 0 1.2rem 0; }

/* Buttons */
.uea-dl .buttons{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.uea-dl .app-btn{ display:inline-grid; place-items:center; border-radius:14px; padding:10px 14px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); will-change: transform; }
.uea-dl .app-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.uea-dl .app-btn:active{ transform: translateY(0); }
.uea-dl .app-btn img{ display:block; height:46px; width:auto; }

/* QR */
.uea-dl .qr-container{ margin-top:1.5rem; }
.uea-dl .or-separator{ display:flex; align-items:center; gap:1rem; color:var(--text); font-size:.9rem; }
.uea-dl .or-separator::before,
.uea-dl .or-separator::after{ content:''; height:1px; background:rgba(255,255,255,.2); flex-grow:1; }
.uea-dl .qr-section{ margin-top:1.5rem; display:flex; align-items:center; gap:1.25rem; }
.uea-dl .qr-code{ width:120px; height:120px; background:#fff; padding:8px; border-radius:6px; flex-shrink:0; }
.uea-dl .qr-text{ color:var(--text); font-weight:500; font-size:1.1rem; line-height:1.5; margin:0; }

/* Right / phone */
.uea-dl .right{ position:relative; display:flex; align-items:flex-end; justify-content:center; z-index:2; margin-bottom:-2rem; }
.uea-dl .phone{ position:relative; width:288px; }
.uea-dl .phone::before{
  content:""; position:absolute; left:50%; bottom:18px; translate:-50% 0;
  width:520px; height:520px; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,0) 70%),
    radial-gradient(closest-side, rgba(255,150,51,.22), rgba(255,150,51,0) 65%);
  filter:blur(26px); opacity:.9; pointer-events:none;
}
.uea-dl .phone img{ width:100%; height:auto; display:block; object-fit:contain; transition: transform .7s var(--ease), opacity .6s var(--ease); }

/* Reveal: fade + slide-up */
[data-uea-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-distance, 22px));
  transition:
    opacity var(--reveal-duration, .6s) var(--ease),
    transform var(--reveal-duration, .6s) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-uea-reveal].is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Phone: stronger slide-up reveal */
.uea-dl .phone[data-uea-reveal]{
  /* start lower than other elements */
  transform: translateY(var(--phone-reveal-distance, 80px));
  transition:
    opacity var(--phone-reveal-duration, .7s) var(--ease),
    transform var(--phone-reveal-duration, .7s) var(--ease);
  /* optional: a bit later than text/buttons */
  transition-delay: var(--phone-reveal-delay, 160ms);
}

.uea-dl .phone[data-uea-reveal].is-in{
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-uea-reveal],
  [data-uea-reveal].is-in,
  .uea-download-card[data-card-reveal],
  .uea-download-card[data-card-reveal].is-in{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Responsive */
@media (max-width: 980px){
  .uea-download-card{ grid-template-columns:1fr; gap:1.4rem; padding:1.25rem; }
  .uea-dl .right{ order:-1; align-items:flex-end; margin-bottom:-1.25rem; }
  .uea-dl .phone{ width:240px; }
  .uea-dl .sub{ max-width:45ch; margin-left:auto; margin-right:auto; text-align:center; }
  .uea-dl .buttons{ justify-content:center; }
  .uea-dl .kicker{ margin-left:auto; margin-right:auto; }
  .uea-dl h1{ text-align:center; }
  .uea-dl .qr-section{ justify-content:center; }
}

/* Tighter mobile paddings */
@media (max-width: 767px){
  .uea-dl{ padding:0.75rem; }
  .uea-download-card{ padding:0.85rem 0.9rem; gap:1rem; border-radius:20px; }
  .uea-dl .kicker{ margin-top:1.2rem; }
}
@media (max-width: 380px){
  .uea-dl{ padding:0.5rem; }
  .uea-download-card{ padding:0.65rem 0.7rem; gap:0.8rem; border-radius:16px; }
}

/* Animations */
@keyframes uea-blink{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.3; transform:scale(.8); }
}