.saweria-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--yellow);
  padding: 14px 20px 14px 14px;
  border-radius: 999px;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(27,21,8,0.5);
  border: 1px solid rgba(242,226,177,0.25);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .25s ease;
  animation: saweria-in .6s cubic-bezier(.22,1,.36,1) .4s both, saweria-pulse 2.8s ease-in-out 1.4s infinite;
}
.saweria-float:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 38px -14px rgba(27,21,8,0.55);
  background: var(--marketing);
  animation-play-state: paused;
}
.saweria-float:active{ transform: translateY(-1px) scale(.97); }

.saweria-icon{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.saweria-icon svg{ width: 16px; height: 16px; }

.saweria-label{ white-space: nowrap; }
.saweria-label .sub{
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(242,226,177,0.65);
  margin-top: 1px;
}

@keyframes saweria-in{
  from{ opacity: 0; transform: translateY(20px) scale(.9); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes saweria-pulse{
  0%, 100%{ box-shadow: 0 14px 30px -12px rgba(27,21,8,0.5), 0 0 0 0 rgba(242,226,177,0.35); }
  50%{ box-shadow: 0 14px 30px -12px rgba(27,21,8,0.5), 0 0 0 10px rgba(242,226,177,0); }
}

@media (max-width: 540px){
  .saweria-float{
    bottom: 16px;
    right: 16px;
    padding: 12px 16px 12px 12px;
  }
  .saweria-label .sub{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .saweria-float{ animation: none !important; }
}

/* ---------- Saweria thanks popup ---------- */
.saweria-overlay{
  position: fixed;
  inset: 0;
  background: rgba(27,21,8,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  animation: saweria-overlay-in .3s ease forwards;
  padding: 20px;
}
@keyframes saweria-overlay-in{ to{ opacity: 1; } }
.saweria-overlay.closing{ animation: saweria-overlay-out .25s ease forwards; }
@keyframes saweria-overlay-out{ to{ opacity: 0; } }

.saweria-modal{
  background: var(--card, #fff);
  border-radius: var(--radius-lg, 28px);
  max-width: 380px;
  width: 100%;
  padding: 36px 30px 30px;
  text-align: center;
  position: relative;
  box-shadow: 0 30px 70px -25px rgba(27,21,8,0.35);
  transform: translateY(20px) scale(.96);
  opacity: 0;
  animation: saweria-modal-in .35s cubic-bezier(.22,1,.36,1) .05s forwards;
}
@keyframes saweria-modal-in{
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.saweria-overlay.closing .saweria-modal{
  animation: saweria-modal-out .2s ease forwards;
}
@keyframes saweria-modal-out{
  to{ transform: translateY(10px) scale(.97); opacity: 0; }
}

.saweria-modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--yellow-soft, #F8EFD3);
  color: var(--ink-faint, #9A927A);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.saweria-modal-close:hover{
  background: var(--ink, #1B1508);
  color: var(--yellow, #F2E2B1);
  transform: rotate(90deg);
}
.saweria-modal-close svg{ width: 14px; height: 14px; }

.saweria-modal-icon{
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--marketing, #C1790A), var(--dev, #2C2312));
  color: var(--yellow, #F2E2B1);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: saweria-icon-pop .5s cubic-bezier(.22,1.4,.36,1) .15s both;
}
@keyframes saweria-icon-pop{
  from{ transform: scale(.5); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
.saweria-modal-icon svg{ width: 28px; height: 28px; }

.saweria-modal h3{
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #1B1508);
  margin-bottom: 10px;
}
.saweria-modal p{
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--ink-soft, #67604C);
  line-height: 1.55;
  margin-bottom: 26px;
}

.saweria-modal-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saweria-modal-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, background .22s ease;
}
.saweria-modal-btn.primary{
  background: var(--ink, #1B1508);
  color: var(--yellow, #F2E2B1);
  box-shadow: 0 14px 28px -14px rgba(27,21,8,0.5);
}
.saweria-modal-btn.primary:hover{ transform: translateY(-2px); background: var(--marketing, #C1790A); }
.saweria-modal-btn.ghost{
  background: transparent;
  color: var(--ink-faint, #9A927A);
  font-weight: 600;
}
.saweria-modal-btn.ghost:hover{ color: var(--ink, #1B1508); }