@import url('https://unpkg.com/open-props/easings.min.css');

:root{
  --bg:#0f1115; --bg-2:#0b0d11; --text:#eaecef; --muted:#a7b0c0;
  --card:rgba(255,255,255,0.04); --border:rgba(255,255,255,0.12);
  --accent:#7aa2ff; --accent-2:#8f82ff; --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(122,162,255,.18), transparent 60%),
              radial-gradient(1000px 600px at 100% 0%, rgba(143,130,255,.2), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  -webkit-font-smoothing:antialiased;
}

.topbar{position:sticky;top:0;z-index:40;backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)), var(--card);
  border-bottom:1px solid var(--border);
}

.wrap{max-width:min(1100px,100%);margin:0 auto;padding:14px clamp(14px,3vw,24px);
  display:flex;align-items:center;gap:16px}

.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.brand img{height:42px;width:auto;display:block}

nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.navbtn{padding:10px 14px;border:1px solid var(--border);background:var(--card);
  border-radius:10px;text-decoration:none;color:inherit;transition:transform .12s ease,border-color .2s}
.navbtn:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 0 12px var(--accent)}

main{max-width:860px;margin: clamp(28px,4vw,44px) auto 80px; padding: 0 clamp(14px,3vw,24px)}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding: clamp(18px, 2.2vw, 24px);margin-bottom:18px}

.title{font-size:clamp(30px,5vw,46px);margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 18px}
.section-title{font-size: clamp(20px,3.5vw,26px);margin:6px 0}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:12px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:var(--shadow);text-decoration:none;
  transition:transform .25s var(--ease-out-3), filter .25s}
.btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08)}
.btn.secondary{background:var(--card);color:var(--text)}

.grid-vertical{display:flex;flex-direction:column;gap:14px}
.tile{padding:18px;border-radius:14px}
.tile.card{transition:box-shadow .35s ease, transform .35s ease, border-color .35s ease}
.tile.card:hover{border-color:var(--accent);box-shadow:0 0 22px rgba(122,162,255,0.55), var(--shadow);
  transform:translateY(-4px)}

/* PARTNERS SCROLL */
.carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 10px 4px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display:none; }

.partner { min-width: 250px; scroll-snap-align:start; }
.partner-row { display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit; }

/* ICON SHIMMER */
.partner-icon {
  width: 72px; height: 72px; border-radius: 12px;
  border: 1px solid var(--border); background:#111;
}
.skel {
  background: linear-gradient(90deg,#2b2e39 0%,#3d4150 50%,#2b2e39 100%);
  background-size:200% 100%; animation: shimmer 1.35s infinite linear;
}
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* DONATION AMOUNT SELECT */
.amounts { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.amount {
  padding:10px 18px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);cursor:pointer;color:var(--text);
  transition:0.25s ease; font-weight:500;
}
.amount:hover { border-color:var(--accent); box-shadow:0 0 14px rgba(122,162,255,0.4); transform:translateY(-2px); }
.amount.active {
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;box-shadow:var(--shadow);
}

/* PREVIEW */
.donation-preview {
  font-size:16px;font-weight:600;color:var(--accent);
  margin-top:6px;margin-bottom:6px;
}

/* AGREEMENT CHECKBOX */
.legal-check {
  display:flex;align-items:flex-start;gap:10px;margin:18px 0 4px;
  font-size:14px;color:var(--muted);line-height:1.4;
}
.legal-check input { width:18px;height:18px;cursor:pointer; }
.legal-check a { color:var(--accent);text-decoration:underline; }

/* CUSTOM ERROR */
.error-msg { color:#ff6b6b;font-size:14px;margin-top:6px; }
input.custom-error{ border-color:#ff6b6b !important; box-shadow:0 0 6px rgba(255,107,107,0.6) !important; }

/* FOOTER */
footer{max-width:1100px;margin:0 auto;padding:26px clamp(14px,3vw,24px) 60px;color:var(--muted)}
/* === PARTNER MARQUEE === */
.partners-marquee {
  overflow: hidden;
  width: 100%;
  margin-top: 18px;
  position: relative;
}

.partner-marquee-track {
  display: flex;
  gap: 26px;
  padding: 8px 0;
  animation: marqueeScroll 22s linear infinite;
}

.partner-marquee-track .partner-icon {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background:#111;
  border:1px solid var(--border);
  object-fit: cover;
  transition: transform .28s ease;
}

.partner-marquee-track .partner-icon:hover {
  transform: scale(1.12);
}

/* shimmer for loading */
.partner-icon.skel {
  background: linear-gradient(90deg,#2b2e39 0%,#3d4150 50%,#2b2e39 100%);
  background-size:200% 100%;
  animation: shimmer 1.35s infinite linear;
}

@keyframes shimmer {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

@keyframes marqueeScroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(6px);
}

.popup.hidden {
  display: none;
}

.popup-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 340px;
  text-align: center;
  box-shadow: var(--shadow);
  animation: pop-in .25s ease;
}

@keyframes pop-in {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

#popup-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
}

#popup-message {
  color: var(--muted);
  margin-bottom: 18px;
}