:root{
  --accent-1: #ff6b6b; 
  --accent-2: #7f5af0; 
  --bg-glow: rgba(127,90,240,0.12);
  --card-bg: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));
  --glass-border: rgba(255,255,255,0.06);
  --muted: #9aa3b2;
}


body{background: radial-gradient(1200px 600px at 10% 10%, rgba(127,90,240,0.06), transparent 8%), radial-gradient(1000px 400px at 90% 90%, rgba(255,107,107,0.04), transparent 10%), linear-gradient(180deg,#fbfbfd 0%, #fff 100%);} 

.donate-section.donate-page{padding:clamp(28px, 4vw, 84px) 0 110px; position:relative; overflow:visible}
.donate-section::after{content:""; position:absolute; inset:auto 0 0 -10%; height:180px; background:linear-gradient(180deg, transparent, rgba(15,23,42,0.02)); pointer-events:none}

.container{max-width:min(1180px, calc(100% - 32px));}
.donate-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:start; max-width:1100px; margin:0 auto}


.donate-form{background:#ffffff; border:1px solid rgba(12,18,30,0.06); border-radius:18px; padding:clamp(22px, 4vw, 40px); box-shadow: 0 10px 28px rgba(12,18,30,0.04); transition:none; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; font-weight:400; backface-visibility: hidden; will-change: auto; transform:none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; width:min(100%, 980px); margin:0 auto;}

.sponsor-card{background:#ffffff; border:1px solid rgba(12,18,30,0.06); box-shadow:0 4px 8px rgba(12,18,30,0.04); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
.account-card-inner{background:#ffffff; border:1px solid rgba(12,18,30,0.06); box-shadow:0 8px 20px rgba(12,18,30,0.04); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}


.donate-form, .sponsor-card, .sponsor-details, .sponsor-field, .sponsor-field input, .sponsor-field label { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}


@media(max-width:919px){
  .donate-form, .sponsor-card, .account-card-inner{box-shadow:none; border:1px solid rgba(12,18,30,0.04); background:#fff}
  .donate-form{padding:22px}
}


.donate-section, .donate-section *{backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important;}


.image-overlay, .account-card, .account-card-inner, .sponsor-card, .donate-form {transform:none; will-change:auto}


.donate-form, .sponsor-card, .sponsor-details, .sponsor-field input, .sponsor-field span {translate: none; text-shadow: none}


.sponsor-field input, .sponsor-field label {font-weight:600; font-size:15px; color:var(--ink)}


.copy-btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius); border:1px solid rgba(12,18,30,0.06); background:#fff; color:var(--ink); font-weight:700}
.copy-btn .copy-svg{display:block; color:var(--terracotta); flex-shrink:0}
.copy-btn:hover{background:rgba(127,90,240,0.03); transform:none}


.copy-row .copy-btn{background:#fff; border:1px solid rgba(12,18,30,0.06);}
.copy-row .copy-btn span{font-weight:700}


.success-modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,0.65); z-index:10002}
.success-modal-inner{background:#fff; padding:22px; border-radius:12px; max-width:520px; width:94%; box-shadow:0 20px 60px rgba(2,6,23,0.2); text-align:left}
.success-modal-inner h3{margin:0 0 8px; color:var(--forest)}
.success-modal-inner p{color:var(--ink-soft); margin:0 0 16px}
.success-modal-inner .actions{display:flex; gap:10px; justify-content:flex-end}


.sponsor-form{margin-top:18px}
.sponsor-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:720px){
  .sponsor-row{grid-template-columns:1fr}
}
.sponsor-field input, .sponsor-field textarea{border-radius:calc(var(--radius) - 0px)}


.donate-form h5{font-size:1.18rem; margin-bottom:14px; color:var(--ink)}

.donate-form:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(12,18,30,0.09)}
.donate-form .eyebrow{color:var(--muted); font-weight:600; letter-spacing:0.04em}
.donate-form h5{margin:6px 0 18px; font-size:1.1rem; color:var(--ink); font-weight:700}


.donation-controls{background:transparent; margin-bottom:18px}
.donation-controls h3{margin:0 0 6px}
.donation-controls .muted{color:var(--muted); margin-bottom:12px}
.preset-amounts{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.amount-btn{background:transparent; border:1px solid rgba(12,18,30,0.06); padding:10px 12px; border-radius:var(--radius); cursor:pointer; font-weight:700; transition:transform .12s ease, background .12s ease}
.amount-btn:hover{transform:translateY(-3px)}
.amount-btn.active{background:linear-gradient(90deg,var(--accent-2),var(--accent-1)); color:#fff; box-shadow:0 10px 30px rgba(127,90,240,0.08)}
.custom-amount input{font-weight:700}
.frequency-row{display:flex; gap:8px; margin:12px 0}
.freq-btn{padding:8px 12px; border-radius:8px; border:1px solid rgba(12,18,30,0.06); background:transparent; cursor:pointer}
.freq-btn.active{background:rgba(127,90,240,0.08); border-color:var(--accent-2)}
.impact-row{display:flex; gap:12px; align-items:center; margin:12px 0}
.impact-meter{background:rgba(12,18,30,0.04); height:10px; border-radius:999px; width:220px; overflow:hidden}
.impact-fill{height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent-1)); width:0}
.impact-text{font-size:0.9rem; color:var(--muted)}
.donate-actions{display:flex; gap:10px; margin-top:14px}


.sponsor-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015)); padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.03);}
.sponsor-grid{display:flex; gap:18px; align-items:center}
.sponsor-img{width:320px; height:auto; border-radius:12px; object-fit:cover; box-shadow:0 14px 40px rgba(15,23,42,0.10); transition:transform .24s ease, box-shadow .18s ease; cursor:zoom-in}
.sponsor-img:hover{transform:scale(1.04); box-shadow:0 20px 60px rgba(15,23,42,0.14)}


.account-card{display:flex; justify-content:center; margin-bottom:18px}
.account-card-inner{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03)); padding:18px; border-radius:14px; box-shadow:0 20px 50px rgba(12,18,30,0.08); border:1px solid rgba(255,255,255,0.04)}
.account-card-img{max-width:720px; width:100%; height:auto; border-radius:10px; display:block}
@media(max-width:919px){
  .account-card-inner{padding:12px}
  .account-card-img{width:100%; max-width:420px}
}

.copy-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px}
.copy-btn{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius); border:1px solid rgba(15,23,42,0.06); background:transparent; color: #0c1726; font-weight:600; cursor:pointer; transition:background .18s ease, transform .08s ease; white-space:nowrap}
.copy-btn:hover{background:rgba(127,90,240,0.06); transform:translateY(-1px)}
.copy-icon{width:16px; height:16px; display:inline-block;}
.copy-toast{position:fixed; right:22px; bottom:90px; background:rgba(2,6,23,0.88); color:#fff; padding:10px 14px; border-radius:var(--radius); box-shadow:0 8px 30px rgba(2,6,23,0.35); opacity:0; transform:translateY(12px); transition:opacity .22s ease, transform .22s ease; z-index:10001}
.copy-toast.show{opacity:1; transform:none}


@media(min-width:920px){
  .sponsor-grid{align-items:flex-start; gap:20px; flex-wrap:nowrap}
  .sponsor-details{flex:1 1 0; min-width:0}
  .sponsor-img{width:360px}
}
@media(max-width:919px){
  .sponsor-grid{flex-direction:column; align-items:stretch; gap:14px}
  .sponsor-img{display:block; width:100%; max-width:220px; margin:0 auto}
  .sponsor-row{flex-direction:column}
  .copy-row{flex-direction:column; align-items:stretch}
  .copy-btn{width:100%; justify-content:center}
}
.sponsor-details p{margin:4px 0; color:var(--ink); font-weight:600; line-height:1.6}
.sponsor-note{margin-top:8px; color:var(--ink-soft); font-size:0.95rem}


.donate-form, .sponsor-card, .sponsor-details { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.sponsor-caption, .copy-row .copy-btn, .sponsor-note { color: var(--ink-soft); }
.sponsor-card p { color: var(--ink); }


.sponsor-form{margin-top:16px}
.sponsor-row{display:flex; gap:12px}
.sponsor-field{display:block; margin-bottom:12px}
.sponsor-field span{display:block; font-size:0.9rem; color:var(--ink-soft); margin-bottom:8px; font-weight:600}
.sponsor-field input[type="text"], .sponsor-field input[type="email"], .sponsor-field input[type="tel"], .sponsor-field input[type="file"]{width:100%; padding:12px 14px; border-radius:var(--radius); border:1px solid rgba(15,23,42,0.08); background:#ffffff; transition:box-shadow .18s ease, border-color .18s ease; color: var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-weight:600; font-size:15px}
.sponsor-field input:focus{outline:none; box-shadow:0 6px 20px rgba(127,90,240,0.08); border-color:var(--accent-2)}
.sponsor-field input::placeholder{color:#9aa3b2; opacity:1} 
.sponsor-field input{color:var(--ink); -webkit-font-smoothing: auto}


.sponsor-field input[type="file"]{padding:18px 14px; cursor:pointer; border-radius:14px}
.sponsor-field .file-preview{display:flex; gap:10px; align-items:center; margin-top:10px}
.sponsor-field label, .sponsor-field span, .sponsor-field input, .sponsor-field textarea { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
.file-thumb{width:56px; height:56px; border-radius:8px; object-fit:cover; border:1px solid rgba(0,0,0,0.04); box-shadow:0 6px 18px rgba(12,18,30,0.06)}
.file-meta{font-size:0.9rem; color:var(--muted)}


.btn.btn-outline{position:relative; overflow:hidden}
.btn.btn-outline .btn-text{position:relative; z-index:2}
.btn.btn-outline.loading{pointer-events:none; opacity:0.95}
.btn.btn-outline.loading:after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(127,90,240,0.12), rgba(255,107,107,0.12)); animation:shine 1.2s linear infinite}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}


.sponsor-status{min-height:1.4rem; margin-bottom:12px; font-weight:600}
.sponsor-status.success{color:var(--accent-2)}
.sponsor-status.error{color:#e04848}


.reveal{opacity:0; transition:opacity .48s ease}
.reveal.visible{opacity:1}


@media(min-width:920px){
  .donate-grid{grid-template-columns:560px 1fr}
  .sponsor-row .sponsor-field{flex:1}
}
@media(max-width:919px){
  .donate-form{padding:28px}
  .sponsor-grid{flex-direction:row; gap:12px}
  .sponsor-img{display:block; width:140px} 
  .sponsor-row{flex-direction:column}
}


@media (prefers-reduced-motion: reduce){
  .reveal, .donate-form, .btn.btn-outline.loading:after{transition:none; animation:none}
}


.monospace{font-family:monospace; background:rgba(0,0,0,0.02); padding:2px 6px; border-radius:4px}


.image-overlay{position:fixed; inset:0; background:rgba(2,6,23,0.75); display:flex; align-items:center; justify-content:center; z-index:9999; padding:24px}
.image-overlay-inner{position:relative; max-width:980px; width:100%; max-height:92vh}
.image-overlay img{max-width:100%; max-height:88vh; display:block; border-radius:10px; box-shadow:0 20px 60px rgba(2,6,23,0.6)}
.image-overlay-close{position:absolute; top:8px; right:8px; background:transparent; border:0; color:#fff; font-size:28px; cursor:pointer; padding:6px}
.sponsor-caption{font-size:0.9rem; color:var(--muted); margin-top:8px}


header.site.nav-open nav ul,
nav ul.is-open {
 display: block !important;
 position: absolute;
 top: calc(100% + 8px);
 right: 36px;
 min-width: 220px;
 background: #fff;
 border: 1px solid rgba(12,18,30,0.06);
 border-radius: 10px;
 padding: 10px 12px;
 box-shadow: 0 20px 50px rgba(12,18,30,0.07);
 z-index: 10001;
}
header.site.nav-open nav ul li,
nav ul.is-open li { display: block; border: 0; }
header.site.nav-open nav ul a,
nav ul.is-open a { display:block; padding:10px 8px; color:var(--ink); font-weight:700 }




/* ============================================================
   DONATE PAGE v2 — hero, impact tiers, split layout
   ============================================================ */

/* ---- Hero ---- */
.dp2-hero{background:linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 55%, #3a5f4f 100%); color:#FBF7F0; padding:clamp(72px, 10vw, 128px) 0 clamp(56px, 8vw, 96px); position:relative; overflow:hidden}
.dp2-hero::before{content:""; position:absolute; width:560px; height:560px; right:-140px; top:-220px; background:radial-gradient(circle, rgba(201,169,97,0.22) 0%, transparent 65%); pointer-events:none}
.dp2-hero::after{content:""; position:absolute; width:420px; height:420px; left:-160px; bottom:-200px; background:radial-gradient(circle, rgba(224,122,95,0.16) 0%, transparent 65%); pointer-events:none}
.dp2-hero-inner{max-width:880px; margin:0 auto; padding:0 24px; position:relative; z-index:1}
.dp2-eyebrow{display:inline-block; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--gold); border:1px solid rgba(201,169,97,0.45); padding:8px 16px; border-radius:999px; margin-bottom:24px}
.dp2-hero-title{font-family:var(--serif); font-weight:500; font-size:clamp(34px, 5.4vw, 60px); line-height:1.12; margin:0 0 20px; color:#FBF7F0}
.dp2-hero-sub{font-size:clamp(16px, 2vw, 19px); line-height:1.65; color:rgba(251,247,240,0.82); max-width:640px; margin:0 0 32px}
.dp2-hero-chips{display:flex; flex-wrap:wrap; gap:12px}
.dp2-chip{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:#FBF7F0; background:rgba(251,247,240,0.1); border:1px solid rgba(251,247,240,0.22); padding:9px 16px; border-radius:999px; backdrop-filter:blur(4px)}
.dp2-chip::before{content:"✓"; color:var(--gold); font-weight:700}

/* ---- Impact tiers ---- */
.dp2-impact{background:var(--cream-soft); padding:clamp(48px, 6vw, 72px) 0; border-bottom:1px solid var(--line)}
.dp2-impact-inner{max-width:1100px; margin:0 auto; padding:0 24px}
.dp2-impact-title{font-family:var(--serif); font-size:clamp(26px, 3.6vw, 38px); font-weight:500; margin:0 0 8px; color:var(--ink)}
.dp2-impact-note{color:var(--ink-soft); margin:0 0 28px; font-size:15px}
.dp2-tiers{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.dp2-tier{appearance:none; background:#FFFFFF; border:1.5px solid var(--line); border-radius:14px; padding:24px 20px; text-align:left; cursor:pointer; transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); font-family:var(--sans); display:flex; flex-direction:column; gap:10px}
.dp2-tier:hover{transform:translateY(-4px); border-color:var(--terracotta-soft); box-shadow:0 14px 30px rgba(31,27,22,0.08)}
.dp2-tier-active{border-color:var(--terracotta); box-shadow:0 14px 30px rgba(201,89,60,0.16); transform:translateY(-4px)}
.dp2-tier-amount{font-family:var(--serif); font-size:clamp(24px, 2.8vw, 30px); font-weight:600; color:var(--forest); display:block}
.dp2-tier-accent .dp2-tier-amount{color:var(--terracotta)}
.dp2-tier-label{font-size:13.5px; line-height:1.5; color:var(--ink-soft)}
.dp2-impact-caption{font-size:12px; color:var(--ink-soft); opacity:.7; margin:18px 0 0}

/* ---- Main split layout ---- */
.donate-section.dp2-main{padding:clamp(48px, 6vw, 84px) 0}
.dp2-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:32px; max-width:1100px; margin:0 auto; align-items:start}
.dp2-col-title{font-family:var(--serif); font-size:clamp(24px, 3vw, 32px); font-weight:500; margin:0 0 10px; color:var(--ink)}
.dp2-col-sub{color:var(--ink-soft); line-height:1.65; margin:0 0 24px; font-size:15px}

/* bank card */
.dp2-bank-card{background:#FFFFFF; border:1px solid var(--line); border-radius:16px; padding:26px; margin-top:18px; box-shadow:0 8px 26px rgba(31,27,22,0.06)}
.dp2-bank-rows{display:flex; flex-direction:column; margin-bottom:18px}
.dp2-bank-row{display:flex; justify-content:space-between; align-items:center; padding:12px 2px; border-bottom:1px dashed var(--line); font-size:15px}
.dp2-bank-row:last-child{border-bottom:none}
.dp2-bank-row span{color:var(--ink-soft)}
.dp2-bank-row strong{color:var(--ink); letter-spacing:0.01em}
.dp2-copy{width:100%; justify-content:center; margin-top:8px}
.copy-row{display:flex; gap:10px; flex-wrap:wrap}

/* trust items */
.dp2-trust{display:flex; flex-direction:column; gap:14px; margin-top:24px}
.dp2-trust-item{display:flex; gap:14px; align-items:flex-start; background:var(--cream-soft); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.dp2-trust-icon{flex:0 0 auto; width:26px; height:26px; border-radius:999px; background:var(--forest); color:#FBF7F0; display:flex; align-items:center; justify-content:center; font-size:13px; margin-top:2px}
.dp2-trust-item strong{display:block; font-size:14.5px; color:var(--ink)}
.dp2-trust-item span:last-child{font-size:13px; color:var(--ink-soft)}
.dp2-trust-item > div{display:flex; flex-direction:column; gap:2px}

/* form card */
.dp2-col-right{position:sticky; top:96px}
.dp2-form-card{background:linear-gradient(180deg, #FFFFFF 0%, var(--cream-soft) 100%); border:1px solid var(--line); border-radius:18px; padding:30px 28px; box-shadow:0 18px 44px rgba(31,27,22,0.09)}
.dp2-form-title{font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 6px; color:var(--ink)}
.dp2-form-sub{font-size:13.5px; color:var(--ink-soft); margin:0 0 22px; line-height:1.6}
.dp2-submit{width:100%; margin-top:6px; padding:15px 24px; font-weight:600; letter-spacing:0.04em}

/* responsive */
@media (max-width: 900px){
  .dp2-tiers{grid-template-columns:repeat(2, 1fr)}
  .dp2-grid{grid-template-columns:1fr; gap:28px}
  .dp2-col-right{position:static}
}
@media (max-width: 520px){
  .dp2-tiers{grid-template-columns:1fr}
  .dp2-hero-chips{flex-direction:column; align-items:flex-start}
}

/* ============================================================
   SUCCESS ANIMATION — checkmark draw + confetti burst
   ============================================================ */
.dp2-check{display:flex; justify-content:center; margin-bottom:14px}
.dp2-check svg{display:block}
.dp2-check-circle{stroke:var(--forest); stroke-dasharray:176; stroke-dashoffset:176; animation:dp2-draw-circle .7s var(--ease) forwards}
.dp2-check-mark{stroke:var(--gold); stroke-dasharray:44; stroke-dashoffset:44; animation:dp2-draw-mark .45s .55s var(--ease) forwards}
.dp2-check{animation:dp2-pop .5s var(--ease-out) both}
@keyframes dp2-draw-circle{to{stroke-dashoffset:0}}
@keyframes dp2-draw-mark{to{stroke-dashoffset:0}}
@keyframes dp2-pop{0%{transform:scale(.4); opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1); opacity:1}}

.dp2-confetti{position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden}
.dp2-confetti i{position:absolute; top:-20px; border-radius:2px; opacity:0.95;
  animation-name:dp2-fall; animation-timing-function:cubic-bezier(0.25, 0.6, 0.4, 1); animation-fill-mode:forwards}
@keyframes dp2-fall{
  0%{transform:translateY(-20px) rotate(0deg); opacity:0.95}
  100%{transform:translateY(105vh) translateX(var(--dp2-x)) rotate(var(--dp2-spin)); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .dp2-confetti{display:none}
  .dp2-check, .dp2-check-circle, .dp2-check-mark{animation:none; stroke-dashoffset:0}
}