/* ==============================
   JX FOOTER - FINAL (FAST MOBILE)
   Desktop: premium
   Mobile: ultra-light
============================== */

.jx-footer{
  --bg1:#f3e3c9;
  --bg2:#f7ecd8;
  --ink:#7a1f1f;
  --card: rgba(255,255,255,.78);
  --border:#7a1f1f33;

  position:relative;
  overflow:hidden;
  color:var(--ink);
  background: linear-gradient(120deg,var(--bg1),var(--bg2),#f0dcc0);
  background-size: 300% 300%;
  animation: jxGradient 16s ease infinite;
  font-family: inherit;
}

@keyframes jxGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Wave */
.jx-wave{
  position:absolute;
  top:0; left:0; right:0;
  height:120px;
  transform:translateY(-1px);
}
.jx-wave svg{
  width:100%;
  height:120px;
  display:block;
  will-change: transform;
  animation: jxWaveMove 10s ease-in-out infinite;
}
.jx-wave path{ fill:#ffffff70; }

@keyframes jxWaveMove{
  0%,100%{ transform: translateX(0); }
  50%{ transform: translateX(-60px); }
}

/* Glow bubble */
.jx-footer:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:420px; height:420px;
  background: radial-gradient(circle at 30% 30%, #ffffff80, transparent 60%);
  filter: blur(2px);
  animation: jxFloat 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes jxFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-18px,18px)}
}

/* Layout */
.jx-container{
  max-width:1200px;
  margin:0 auto;
  padding:140px 18px 28px;

  display:grid;
  grid-template-columns: 1.15fr .85fr 1.2fr;
  gap:28px;
  align-items:start;
}
@media (max-width: 980px){
  .jx-container{
    grid-template-columns: 1fr;
    padding-top:120px;
  }
}

/* Cards */
.jx-col{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 12px 30px #00000010;
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))){
  .jx-col{ backdrop-filter: blur(6px); }
}

/* Brand */
.jx-brand{ display:flex; gap:12px; align-items:center; }
.jx-logo{
  width:54px; height:54px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  padding:6px;
  border:1px solid var(--border);
}
.jx-title{ font-size:18px; font-weight:800; letter-spacing:.2px; }
.jx-subtitle{ font-size:13px; opacity:.85; margin-top:4px; }

/* App */
.jx-appbox{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:#ffffff70;
  border:1px dashed var(--border);
}
.jx-app-title{ font-weight:800; margin-bottom:10px; }
.jx-app-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.jx-badge{
  display:inline-flex;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:.25s;
  background:#fff;
}
.jx-badge img{ height:42px; width:auto; display:block; }
.jx-badge:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 22px #00000012;
}
.jx-app-note{ font-size:12px; opacity:.85; margin-top:10px; }

/* Headings */
.jx-h{ font-weight:900; font-size:16px; margin-bottom:12px; }

/* Links */
.jx-links{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.jx-links a{
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff60;
  transition:.25s;
}
.jx-links a:hover{
  background:#fff;
  box-shadow:0 10px 18px #00000010;
}
html[dir="rtl"] .jx-links a:hover{ transform: translateX(-4px); }
html[dir="ltr"] .jx-links a:hover{ transform: translateX(4px); }

/* Info */
.jx-info{ display:grid; gap:12px; }
.jx-row{ display:flex; gap:12px; align-items:flex-start; }
.jx-ic{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--border);
  background:#ffffff70;
  flex:0 0 40px;
  animation: jxPulse 1.6s ease-in-out infinite;
}
@keyframes jxPulse{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.06) }
}

.jx-footer a{ color:var(--ink); text-decoration:none; font-weight:700; }
.jx-footer a:hover{ text-decoration:underline; }
.jx-ltr{ direction:ltr; unicode-bidi:bidi-override; display:inline-block; }

/* Social */
.jx-social{
  display:flex;
  gap:10px;
  margin-top:14px;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.jx-s{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  background:#ffffff70;
  transition:.25s;
}
.jx-s:hover{
  transform: translateY(-3px) rotate(-4deg);
  background:#fff;
  box-shadow:0 10px 18px #00000010;
}

/* Bottom bar */
.jx-bottom{
  margin-top:22px;
  border-top:1px solid var(--border);
  background:#00000008;
}
.jx-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
}
@media (max-width: 680px){
  .jx-bottom-inner{
    flex-direction:column;
    gap:8px;
  }
}

/* Reveal (kept) */
.jx-reveal{
  opacity:0;
  transform: translateY(28px) scale(.99);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.jx-reveal.is-visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .jx-footer, .jx-footer *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   MOBILE ULTRA-LIGHT (FAST)
========================= */
@media (max-width: 767px){

  /* remove heavy layers */
  .jx-wave{ display:none !important; }
  .jx-footer:before{ display:none !important; }

  /* static background (no gradient) */
  .jx-footer{
    animation: none !important;
    background: #f7ecd8 !important;
  }

  /* remove blur + shadows */
  .jx-col{
    backdrop-filter: none !important;
    box-shadow: none !important;
    background: #fff !important;
    border: 1px solid rgba(122,31,31,.12) !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* stop icon pulse */
  .jx-ic{ animation:none !important; }

  /* tighter spacing */
  .jx-container{
    padding: 90px 12px 18px !important;
    gap: 12px !important;
  }
  .jx-title{ font-size:16px !important; }
  .jx-h{ font-size:15px !important; }

  /* disable hover effects on mobile */
  .jx-links a, .jx-s, .jx-badge{ transition:none !important; }
  .jx-links a:hover, .jx-s:hover, .jx-badge:hover{
    transform:none !important;
    box-shadow:none !important;
  }
}