/* =========================================================
   ZAVEN Donate — Download App Premium UI
   Scope: page content only.
   IMPORTANT: Does NOT style the top header/nav/tabs.
   ========================================================= */

:root{
  --zui-bg:#050611;
  --zui-panel:rgba(8,10,28,.76);
  --zui-panel-strong:rgba(10,11,31,.92);
  --zui-panel-soft:rgba(15,13,39,.72);
  --zui-line:rgba(145,91,255,.18);
  --zui-line-strong:rgba(184,83,255,.38);
  --zui-text:#f7f6ff;
  --zui-muted:#9c96b4;
  --zui-purple:#b23dff;
  --zui-violet:#7d4cff;
  --zui-blue:#4285ff;
  --zui-pink:#e64dc7;
  --zui-cyan:#59d5ff;
  --zui-green:#49e2a2;
}

/* ---------- Page background / overall spacing ---------- */
.download-app-body{
  background:
    radial-gradient(circle at 15% 8%,rgba(93,62,255,.12),transparent 28%),
    radial-gradient(circle at 86% 18%,rgba(178,50,255,.11),transparent 26%),
    linear-gradient(180deg,#050611 0%,#060719 48%,#050611 100%) !important;
}

.download-app-main{
  width:min(calc(100% - 34px),1580px) !important;
  margin:0 auto !important;
  padding:28px 0 64px !important;
}

/* ---------- Hero wrapper ---------- */
.download-hero-frame{
  position:relative;
  overflow:visible;
  border:1px solid rgba(151,90,255,.20) !important;
  border-radius:30px !important;
  background:
    linear-gradient(145deg,rgba(10,11,31,.76),rgba(7,8,24,.84)) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(76,105,255,.035),
    inset 0 0 58px rgba(104,54,255,.025) !important;
}

.download-frame-corner{
  opacity:.72 !important;
  filter:drop-shadow(0 0 12px rgba(160,64,255,.28)) !important;
}

.download-hero{
  min-height:720px !important;
  padding:54px 58px !important;
  border-radius:29px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 73% 34%,rgba(149,51,255,.22),transparent 28%),
    radial-gradient(circle at 52% 92%,rgba(51,89,255,.08),transparent 30%),
    linear-gradient(118deg,rgba(6,8,23,.97),rgba(10,8,31,.91) 56%,rgba(6,6,20,.97)) !important;
}

.download-hero-background{
  opacity:.30 !important;
  filter:saturate(.96) contrast(1.04) !important;
  mask-image:linear-gradient(90deg,transparent 2%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.85) 100%) !important;
}

.download-glow{
  filter:blur(54px) !important;
  opacity:.42 !important;
}
.download-glow-one{background:#7d4cff !important;}
.download-glow-two{background:#d94bd3 !important;}

/* ---------- Hero copy ---------- */
.download-copy{
  position:relative !important;
  z-index:5 !important;
}

.download-pill,
.pl-eyebrow{
  border:1px solid rgba(187,90,255,.26) !important;
  background:linear-gradient(180deg,rgba(112,48,180,.17),rgba(82,45,143,.10)) !important;
  color:#d5a7ff !important;
  box-shadow:inset 0 0 18px rgba(125,62,255,.035) !important;
  letter-spacing:.9px !important;
}

.download-copy h1{
  margin-top:20px !important;
  color:#fff !important;
  letter-spacing:-2px !important;
  line-height:1.02 !important;
  text-shadow:0 10px 32px rgba(0,0,0,.30) !important;
}
.download-copy h1 span,
.pl-gradient{
  background:linear-gradient(95deg,#f4e8ff 0%,#ce68ff 34%,#8c5dff 67%,#59a3ff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

.download-copy > p,
.pl-section-desc{
  color:#9d98b2 !important;
  line-height:1.78 !important;
}

/* ---------- Mini feature cards ---------- */
.download-mini-features{
  gap:12px !important;
}
.download-mini-features article{
  min-height:100px !important;
  border:1px solid rgba(150,91,255,.15) !important;
  border-radius:18px !important;
  padding:16px !important;
  background:
    linear-gradient(145deg,rgba(10,13,34,.80),rgba(15,10,38,.69)) !important;
  box-shadow:
    inset 0 0 24px rgba(119,54,255,.025),
    0 10px 26px rgba(0,0,0,.15) !important;
  transition:.20s ease !important;
}
.download-mini-features article:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(190,83,255,.34) !important;
  box-shadow:0 16px 34px rgba(42,17,94,.20),inset 0 0 26px rgba(118,55,255,.05) !important;
}
.download-mini-features article i{
  width:40px !important;height:40px !important;
  border-radius:13px !important;
  border:1px solid rgba(194,80,255,.27) !important;
  background:rgba(120,45,183,.12) !important;
  color:#d79bff !important;
  box-shadow:0 0 18px rgba(146,54,255,.10) !important;
}
.download-mini-features article strong{color:#f7f4ff !important;}
.download-mini-features article small{color:#85809a !important;line-height:1.5 !important;}

/* ---------- Store cards / QR ---------- */
.download-store-grid{
  gap:13px !important;
  margin-top:18px !important;
}
.download-store-card{
  min-height:108px !important;
  border:1px solid rgba(143,89,255,.18) !important;
  border-radius:19px !important;
  padding:16px !important;
  background:
    linear-gradient(145deg,rgba(10,12,31,.88),rgba(10,8,29,.80)) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16),inset 0 0 22px rgba(105,57,221,.025) !important;
  transition:.20s ease !important;
}
.download-store-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(182,83,255,.40) !important;
  background:linear-gradient(145deg,rgba(13,14,39,.94),rgba(16,9,39,.88)) !important;
  box-shadow:0 18px 40px rgba(41,18,89,.24) !important;
}
.download-store-icon{
  width:48px !important;height:48px !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,rgba(155,61,255,.25),rgba(62,107,255,.18)) !important;
  border:1px solid rgba(178,84,255,.30) !important;
  color:#fff !important;
}
.download-store-card strong{color:#fff !important;font-size:15px !important;}
.download-store-card small,
.download-store-card span{color:#8c879f !important;}
.download-qr-placeholder{
  border:1px solid rgba(151,91,255,.20) !important;
  border-radius:13px !important;
  background:#08091d !important;
  overflow:hidden !important;
}
.download-qr-placeholder.has-image img{
  border-radius:9px !important;
}
.download-scan-note{
  color:#78738d !important;
  margin-top:10px !important;
}

/* ---------- Phone visual ---------- */
.download-visual{
  filter:drop-shadow(0 28px 44px rgba(63,31,133,.18)) !important;
}
.download-phone-custom-wrap,
.download-phone{
  border-radius:36px !important;
  box-shadow:
    0 30px 65px rgba(0,0,0,.40),
    0 0 54px rgba(119,54,255,.13) !important;
}
.download-phone{
  border-color:rgba(172,88,255,.32) !important;
  background:linear-gradient(160deg,#11142d,#060817) !important;
}
.download-phone-screen{
  background:linear-gradient(180deg,#0b0d22,#070817) !important;
}
.phone-balance,
.phone-stat-grid article,
.phone-recent-list article{
  border:1px solid rgba(142,91,255,.13) !important;
  background:rgba(13,14,34,.72) !important;
}
.phone-bottom-nav{
  border-top-color:rgba(151,91,255,.12) !important;
}
.phone-bottom-nav button{
  background:linear-gradient(145deg,#bd3cff,#6f55ff,#4388ff) !important;
  box-shadow:0 8px 22px rgba(104,57,255,.26) !important;
}

/* ---------- Main mascot on download section ---------- */
.download-mascot-wrap{
  filter:drop-shadow(0 22px 32px rgba(94,46,197,.28)) !important;
  animation:zuiMascotFloat 4.4s ease-in-out infinite !important;
}
@keyframes zuiMascotFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ---------- Feature strip ---------- */
.download-feature-strip{
  margin-top:18px !important;
  gap:12px !important;
  padding:16px !important;
  border:1px solid rgba(145,91,255,.17) !important;
  border-radius:22px !important;
  background:
    linear-gradient(100deg,rgba(8,10,27,.86),rgba(14,9,35,.78)) !important;
  box-shadow:0 20px 45px rgba(0,0,0,.17) !important;
}
.download-feature-intro{
  border-right-color:rgba(145,91,255,.15) !important;
}
.download-feature-intro small{color:#827d94 !important;}
.download-feature-intro strong{color:#fff !important;}
.download-feature-strip article{
  min-height:78px !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  transition:.18s ease !important;
}
.download-feature-strip article:hover{
  background:rgba(125,61,255,.07) !important;
  transform:translateY(-2px) !important;
}
.download-feature-strip article i{
  color:#c57cff !important;
  background:rgba(110,48,175,.12) !important;
  border:1px solid rgba(184,80,255,.20) !important;
}
.download-feature-strip article strong{color:#f4f2fb !important;}
.download-feature-strip article small{color:#7f7a91 !important;}

/* ---------- Bottom information cards ---------- */
.download-bottom-cards{
  margin-top:14px !important;
  gap:12px !important;
}
.download-info-card,
.download-security-badge{
  border:1px solid rgba(145,91,255,.16) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,rgba(9,11,30,.82),rgba(13,9,32,.76)) !important;
  box-shadow:inset 0 0 28px rgba(100,53,215,.025) !important;
  transition:.20s ease !important;
}
.download-info-card:hover,
.download-security-badge:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(183,82,255,.36) !important;
}
.download-info-card i{
  border-color:rgba(188,78,255,.24) !important;
  background:rgba(110,43,173,.12) !important;
  color:#d493ff !important;
}
.download-info-card strong,
.download-security-badge strong{color:#fff !important;}
.download-info-card p,
.download-security-badge span{color:#817c92 !important;}
.download-info-card a{
  color:#c28cff !important;
}

/* ---------- Public landing sections ---------- */
.pl-section{
  position:relative !important;
  overflow:hidden !important;
  margin-top:22px !important;
  padding:58px !important;
  border:1px solid rgba(146,91,255,.16) !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 90% 8%,rgba(148,49,255,.08),transparent 28%),
    linear-gradient(145deg,rgba(8,10,28,.84),rgba(11,8,30,.79)) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.24),
    inset 0 0 40px rgba(103,55,219,.024) !important;
}
.pl-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.012),transparent 28%,transparent 72%,rgba(127,65,255,.018));
}

.pl-section-title{
  color:#f7f5ff !important;
  letter-spacing:-1.3px !important;
  line-height:1.08 !important;
}
.pl-section-desc{
  max-width:760px !important;
}

/* Creator */
.pl-creator-grid{
  gap:24px !important;
  align-items:stretch !important;
}
.pl-feature-stack{
  gap:11px !important;
}
.pl-feature-row{
  min-height:90px !important;
  border:1px solid rgba(145,91,255,.15) !important;
  border-radius:18px !important;
  padding:15px 16px !important;
  background:linear-gradient(145deg,rgba(10,12,31,.82),rgba(14,9,34,.72)) !important;
  transition:.18s ease !important;
}
.pl-feature-row:hover{
  transform:translateX(4px) !important;
  border-color:rgba(184,80,255,.34) !important;
  background:linear-gradient(145deg,rgba(13,14,38,.90),rgba(17,10,39,.82)) !important;
}
.pl-feature-row i{
  width:45px !important;height:45px !important;
  border-radius:14px !important;
  display:grid !important;place-items:center !important;
  color:#d18cff !important;
  border:1px solid rgba(190,82,255,.22) !important;
  background:rgba(112,43,171,.11) !important;
}
.pl-feature-row strong{color:#f5f2fb !important;}
.pl-feature-row small{color:#817c92 !important;line-height:1.5 !important;}
.pl-creator-showcase{
  border:1px solid rgba(151,91,255,.20) !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,#0b0c27,#100a2c) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.24),0 0 50px rgba(118,51,255,.06) !important;
}
.pl-showcase-image{
  border-radius:18px !important;
}
.pl-platforms{
  color:#9e98b2 !important;
  border-top-color:rgba(151,91,255,.13) !important;
}
.pl-creator-mascot{
  filter:drop-shadow(0 18px 28px rgba(116,51,255,.22)) !important;
}
.pl-creator-quote{
  margin-top:12px !important;
  border:1px solid rgba(151,91,255,.14) !important;
  border-radius:17px !important;
  background:rgba(10,11,28,.68) !important;
}
.pl-creator-quote i{color:#d78cff !important;}
.pl-creator-quote p{color:#a19bad !important;}
.pl-creator-quote strong{color:#d9d3e6 !important;}

.pl-creator-cta{
  margin-top:22px !important;
  padding:18px !important;
  border:1px solid rgba(151,91,255,.15) !important;
  border-radius:18px !important;
  background:linear-gradient(90deg,rgba(103,50,181,.10),rgba(56,80,188,.06)) !important;
}
.pl-creator-cta strong{color:#fff !important;}

/* Buttons throughout sections */
.pl-button{
  min-height:46px !important;
  padding:0 18px !important;
  border-radius:13px !important;
  font-weight:900 !important;
  transition:.18s ease !important;
}
.pl-button:hover{transform:translateY(-2px) !important;filter:brightness(1.06) !important;}
.pl-button-primary,
.pl-button-purple{
  border-color:rgba(193,85,255,.40) !important;
  color:white !important;
  background:linear-gradient(105deg,#b23dff,#7d4cff 52%,#4385ff) !important;
  box-shadow:0 12px 28px rgba(92,54,255,.24) !important;
}
.pl-button-ghost{
  color:#e5dff0 !important;
  background:rgba(8,9,25,.72) !important;
  border-color:rgba(151,95,255,.23) !important;
}

/* ---------- Pricing ---------- */
.pl-pricing-toggle{
  padding:5px !important;
  border:1px solid rgba(151,91,255,.18) !important;
  border-radius:14px !important;
  background:rgba(7,8,24,.72) !important;
}
.pl-pricing-toggle button{
  border-radius:10px !important;
  color:#898397 !important;
  transition:.18s ease !important;
}
.pl-pricing-toggle button.is-active{
  color:#fff !important;
  background:linear-gradient(105deg,rgba(181,61,255,.78),rgba(81,94,255,.78)) !important;
  box-shadow:0 8px 22px rgba(105,55,255,.18) !important;
}

.pl-pricing-grid{
  gap:16px !important;
  margin-top:26px !important;
}
.pl-plan{
  min-height:100% !important;
  border:1px solid rgba(144,91,255,.16) !important;
  border-radius:22px !important;
  padding:24px !important;
  background:
    linear-gradient(155deg,rgba(10,12,32,.90),rgba(12,8,31,.82)) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.19),inset 0 0 24px rgba(104,53,225,.02) !important;
  transition:.20s ease !important;
}
.pl-plan:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(187,82,255,.36) !important;
  box-shadow:0 26px 54px rgba(45,20,94,.23) !important;
}
.pl-plan.is-featured{
  border-color:rgba(194,84,255,.48) !important;
  background:
    radial-gradient(circle at 50% -20%,rgba(169,61,255,.18),transparent 42%),
    linear-gradient(155deg,rgba(14,13,39,.96),rgba(17,9,42,.90)) !important;
  box-shadow:0 24px 60px rgba(77,31,153,.22),0 0 40px rgba(137,55,255,.07) !important;
}
.pl-plan-badge{
  border-color:rgba(201,88,255,.38) !important;
  background:linear-gradient(100deg,#9a45ff,#6e5cff) !important;
  color:#fff !important;
}
.pl-plan h3{color:#fff !important;}
.pl-plan-sub{color:#868095 !important;}
.pl-plan-price strong{
  background:linear-gradient(90deg,#fff,#d38aff,#7aa2ff) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.pl-plan-feature-preview li{
  color:#a29caf !important;
}
.pl-plan-feature-preview li::marker{color:#b267ff !important;}
.pl-plan-guide-button{
  border:1px solid rgba(151,91,255,.16) !important;
  background:rgba(8,9,25,.70) !important;
  color:#beb8ca !important;
  border-radius:13px !important;
}
.pl-plan-guide-button:hover{
  border-color:rgba(184,82,255,.34) !important;
  background:rgba(108,52,184,.08) !important;
}
.pl-pricing-note,
.pl-package-sync-note,
.pl-package-empty{
  color:#807a91 !important;
  border-color:rgba(151,91,255,.14) !important;
  background:rgba(8,9,24,.54) !important;
}

/* ---------- Themes ---------- */
.pl-theme-grid{gap:24px !important;}
.pl-theme-copy{
  position:relative !important;
  z-index:2 !important;
}
.pl-theme-gallery{
  gap:12px !important;
}
.pl-theme-card{
  border:1px solid rgba(151,91,255,.15) !important;
  border-radius:18px !important;
  padding:10px !important;
  background:linear-gradient(145deg,rgba(10,12,31,.83),rgba(15,9,35,.74)) !important;
  transition:.20s ease !important;
}
.pl-theme-card:hover{
  transform:translateY(-4px) scale(1.01) !important;
  border-color:rgba(187,82,255,.34) !important;
  box-shadow:0 17px 36px rgba(44,17,93,.20) !important;
}
.pl-theme-thumb{
  overflow:hidden !important;
  border-radius:13px !important;
  background:#08091d !important;
}
.pl-theme-thumb img{
  transition:transform .28s ease !important;
}
.pl-theme-card:hover .pl-theme-thumb img{
  transform:scale(1.045) !important;
}
.pl-theme-card strong{color:#e7e3ee !important;}

.pl-theme-widgets{
  gap:12px !important;
  margin-top:18px !important;
}
.pl-widget-card{
  border:1px solid rgba(151,91,255,.15) !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,rgba(10,12,31,.82),rgba(14,9,34,.72)) !important;
}
.pl-widget-card span{color:#807b90 !important;}
.pl-widget-card strong{color:#fff !important;}
.pl-widget-bar{
  background:linear-gradient(90deg,#b13dff,#7853ff,#4287ff) !important;
  box-shadow:0 0 14px rgba(127,68,255,.22) !important;
}
.pl-theme-bottom{
  border:1px solid rgba(151,91,255,.14) !important;
  border-radius:16px !important;
  background:rgba(8,9,25,.56) !important;
  color:#b9b3c6 !important;
}
.pl-theme-mascot{
  filter:drop-shadow(0 20px 32px rgba(104,46,219,.26)) !important;
}

/* ---------- Package guide modal ---------- */
.pl-guide-backdrop{
  background:rgba(2,3,10,.78) !important;
  backdrop-filter:blur(12px) !important;
}
.pl-guide-card{
  border:1px solid rgba(174,84,255,.30) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 90% 0%,rgba(167,48,255,.11),transparent 24%),
    linear-gradient(155deg,#0a0c24,#0d0929) !important;
  box-shadow:0 34px 100px rgba(0,0,0,.52),0 0 60px rgba(114,49,255,.08) !important;
}
.pl-guide-head{
  border-bottom-color:rgba(151,91,255,.13) !important;
}
.pl-guide-head h2{color:#fff !important;}
.pl-guide-head p{color:#817b91 !important;}
.pl-guide-head-tools span{
  color:#c997ff !important;
  border-color:rgba(180,80,255,.23) !important;
  background:rgba(105,43,165,.10) !important;
}
.pl-guide-head-tools button{
  border-color:rgba(151,91,255,.20) !important;
  background:rgba(8,9,25,.70) !important;
  color:#ded8e9 !important;
}
.pl-guide-search{
  border-color:rgba(151,91,255,.18) !important;
  background:rgba(7,8,23,.72) !important;
}
.pl-guide-search input{
  color:#fff !important;
}
.pl-guide-item{
  border-color:rgba(151,91,255,.13) !important;
  background:rgba(10,11,29,.64) !important;
}
.pl-guide-item i{
  color:#72e5bd !important;
  background:rgba(45,171,126,.09) !important;
  border-color:rgba(72,219,164,.16) !important;
}
.pl-guide-item span{color:#c6c0d0 !important;}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .download-app-main{
    width:min(calc(100% - 24px),1180px) !important;
  }
  .download-hero{
    padding:42px 38px !important;
    min-height:680px !important;
  }
  .pl-section{
    padding:42px !important;
  }
}

@media(max-width:900px){
  .download-hero{
    padding:34px 24px !important;
    min-height:auto !important;
  }
  .download-mini-features,
  .download-store-grid{
    grid-template-columns:1fr !important;
  }
  .download-feature-strip{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  .download-feature-intro{
    grid-column:1 / -1 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(151,91,255,.13) !important;
    padding-bottom:12px !important;
  }
  .pl-section{
    padding:32px 22px !important;
    border-radius:22px !important;
  }
  .pl-pricing-grid,
  .pl-theme-gallery,
  .pl-theme-widgets{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:620px){
  .download-app-main{
    width:min(calc(100% - 14px),620px) !important;
    padding-top:14px !important;
  }
  .download-hero-frame,
  .download-hero{
    border-radius:22px !important;
  }
  .download-hero{
    padding:26px 16px !important;
  }
  .download-feature-strip,
  .download-bottom-cards,
  .pl-pricing-grid,
  .pl-theme-gallery,
  .pl-theme-widgets{
    grid-template-columns:1fr !important;
  }
  .pl-section{
    margin-top:14px !important;
    padding:26px 16px !important;
  }
  .pl-section-title{
    font-size:clamp(30px,9vw,42px) !important;
  }
  .pl-creator-cta{
    display:grid !important;
  }
}