:root{
  --orange:#ff6b1a;
  --orange-2:#ff7626;
  --navy:#111a2d;
  --navy-2:#18233a;
  --text:#172033;
  --muted:#70798b;
  --line:#e8e9ed;
  --cream:#fffaf7;
  --soft:#fff0e8;
  --white:#fff;
  --success:#35a86b;
  --shadow:0 18px 55px rgba(17,26,45,.10);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.55;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

/* Layout */
.container{width:min(1080px,calc(100% - 36px));margin:auto}
.page-head{text-align:center;padding:62px 0 34px}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  background:#fff0e8;color:var(--orange);font-size:11px;font-weight:850;letter-spacing:1.2px;
}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.page-head h1{font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-2px;margin:18px 0 13px}
.page-head p{max-width:650px;margin:auto;color:var(--muted);font-size:16px}

/* Progress */
.progress-wrap{padding:0 0 34px}
.progress{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative;
}
.progress:before{
  content:"";position:absolute;left:7%;right:7%;top:20px;height:2px;background:#e4e5e8;z-index:0;
}
.progress-item{position:relative;z-index:1;text-align:center}
.progress-dot{
  width:40px;height:40px;border-radius:50%;margin:auto;background:#fff;border:1px solid #ddd;
  display:grid;place-items:center;font-size:12px;font-weight:850;color:#8a909c;transition:.25s;
}
.progress-item.active .progress-dot,.progress-item.done .progress-dot{
  background:var(--orange);border-color:var(--orange);color:#fff;
}
.progress-label{font-size:11px;font-weight:800;margin-top:9px;color:#9298a4;text-transform:uppercase;letter-spacing:.5px}
.progress-item.active .progress-label,.progress-item.done .progress-label{color:var(--navy)}

/* Cards/forms */
.step-card{
  background:#fff;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(22px,4vw,42px);margin-bottom:50px;
}
.step-title{margin:0;font-size:25px;letter-spacing:-.7px}
.step-subtitle{color:var(--muted);margin:6px 0 28px;font-size:14px}
.section-title{font-size:14px;font-weight:850;text-transform:uppercase;letter-spacing:.7px;margin:30px 0 15px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
.field label{display:block;font-size:13px;font-weight:750;margin-bottom:7px}
.req{color:var(--orange)}
.optional{font-weight:500;color:#9a9faa;font-size:11px}
input,select,textarea{
  width:100%;height:50px;border:1px solid #dedfe4;border-radius:12px;background:#fff;
  padding:0 14px;outline:none;color:var(--text);transition:.2s;
}
textarea{height:100px;padding:12px 14px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.10)}
.field.invalid input,.field.invalid select{border-color:#df4d4d}
.error{font-size:11px;color:#d44747;margin-top:5px;display:none}
.field.invalid .error{display:block}
.choice-row{display:flex;gap:10px;flex-wrap:wrap}
.choice{
  border:1px solid #dedfe4;background:#fff;border-radius:12px;padding:11px 17px;
  font-size:13px;font-weight:750;color:#626a78;transition:.2s;
}
.choice.selected{border-color:var(--orange);background:#fff3ed;color:var(--orange)}
.note{
  background:#fafafa;border:1px solid #eee;border-radius:14px;padding:14px 16px;
  color:#737a88;font-size:12px;margin-top:18px;
}
.check-row{display:flex;align-items:flex-start;gap:10px;margin-top:13px;color:#5e6674;font-size:13px}
.check-row input{width:17px;height:17px;margin-top:2px;accent-color:var(--orange)}
.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid #eee}
.btn{
  min-height:50px;padding:0 23px;border:0;border-radius:12px;font-weight:800;font-size:13px;
  transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:#ef5c0b;transform:translateY(-1px)}
.btn-primary:disabled{background:#d8d9dd;color:#9296a0;cursor:not-allowed;transform:none}
.btn-secondary{background:#f4f4f5;color:var(--navy)}

/* Donation details */
.amount-wrap{position:relative;max-width:450px}
.amount-wrap span{position:absolute;left:16px;top:13px;font-size:19px;font-weight:850;color:var(--navy)}
.amount-wrap input{padding-left:35px;font-size:19px;font-weight:750}
.amount-presets{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.preset{padding:10px 16px;border:1px solid #dedfe4;background:#fff;border-radius:10px;font-size:13px;font-weight:750}
.preset.active{border-color:var(--orange);background:#fff3ed;color:var(--orange)}
.crypto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.crypto-option{
  position:relative;border:1px solid #dedfe4;border-radius:16px;padding:18px 14px;background:#fff;
  text-align:left;transition:.2s;min-height:112px;
}
.crypto-option:hover{border-color:#b9bbc1;transform:translateY(-1px)}
.crypto-option.active{border:2px solid var(--orange);padding:17px 13px}
.crypto-check{
  position:absolute;right:10px;top:10px;width:20px;height:20px;border-radius:50%;
  background:var(--orange);color:#fff;display:none;place-items:center;font-size:12px;font-weight:900
}
.crypto-option.active .crypto-check{display:grid}
.coin{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:11px}
.coin.sol{background:linear-gradient(145deg,#8a7cff,#00d8a8)}
.coin.btc{background:#f7931a}
.coin.eth{background:#5361a6}
.coin.usdt{background:#26a17b}
.coin svg{width:24px;height:24px}
.coin-text strong{display:block;font-size:14px}.coin-text small{color:#7f8795;font-size:11px}

/* Step 3 — payment design */
.payment-shell{background:var(--cream);margin-bottom:45px}
.payment-panel{
  background:var(--navy);border-radius:26px;color:#fff;padding:30px;
  box-shadow:0 25px 65px rgba(17,26,45,.20)
}
.payment-panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.payment-kicker{font-size:11px;letter-spacing:1.2px;color:#b5bfd1;font-weight:850}
.payment-amount{font-size:15px;font-weight:800}.payment-amount span{color:var(--orange)}
.payment-crypto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.payment-crypto{
  position:relative;border:1px solid #344057;background:#18233a;border-radius:15px;
  padding:14px;display:flex;align-items:center;gap:11px;text-align:left;color:#fff;min-width:0
}
.payment-crypto.active{border:2px solid var(--orange);padding:13px}
.payment-crypto .coin{width:42px;height:42px;flex:0 0 42px;margin:0}
.payment-crypto strong{font-size:13px;display:block}.payment-crypto small{font-size:10px;color:#8f9bb0}
.payment-check{position:absolute;right:9px;top:8px;width:18px;height:18px;border-radius:50%;background:var(--orange);display:none;place-items:center;font-size:10px}
.payment-crypto.active .payment-check{display:grid}
.payment-body{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;margin-top:30px}
.payment-label{font-size:10px;letter-spacing:1px;color:#b6c0d0;font-weight:850}
.selected-coin{display:flex;align-items:center;gap:14px;margin:14px 0 25px}
.selected-coin .coin{width:58px;height:58px;margin:0}
.selected-coin strong{display:block;font-size:23px;line-height:1.1}.selected-coin small{color:#8996ab}
.wallet-box{
  display:flex;align-items:center;gap:12px;background:#0c1425;border:1px solid #2b354b;
  border-radius:13px;padding:14px;margin-top:9px
}
.wallet-address{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#d7dce5;word-break:break-all;flex:1}
.copy-mini{width:36px;height:36px;border:1px solid #364158;border-radius:9px;background:#18233a;color:#fff;display:grid;place-items:center}
.network-warning{display:flex;gap:8px;color:#8995a8;font-size:11px;margin:12px 0}
.copy-main{width:100%;background:var(--orange);color:#fff;border:0;border-radius:11px;height:48px;font-weight:850}
.security-box{margin-top:14px;border:1px solid #303b51;background:#151f33;border-radius:13px;padding:14px;color:#aeb8c9;font-size:11px}
.security-box b{color:var(--orange)}
.qr-side{text-align:center}
.qr-box{width:255px;height:255px;background:#fff;border-radius:18px;margin:13px auto 15px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
#qrcode{width:220px;height:220px;display:flex;align-items:center;justify-content:center;line-height:0;flex:0 0 220px}
#qrcode img,#qrcode canvas{display:block;width:220px!important;height:220px!important;max-width:none;max-height:none}
.qr-center-logo{position:absolute;width:44px;height:44px;border-radius:50%;background:var(--navy);padding:6px;display:grid;place-items:center}
.qr-caption{font-size:13px;color:#d6dbe4}.qr-caption strong{display:block;font-size:14px}
.network-pill{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 10px;border-radius:99px;background:#18243a;color:#93a0b4;font-size:10px}
.network-pill i{width:6px;height:6px;border-radius:50%;background:#48c58b}
 .anonymous-option{margin:18px 0 24px}

.email-preference .check-row{display:flex;align-items:flex-start;gap:12px}
.email-preference input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;margin:2px 0 0;
  border:1.5px solid #c9cbd0;border-radius:5px;background:#fff;
  flex:0 0 18px;position:relative;cursor:pointer;box-sizing:border-box
}
.email-preference input[type="checkbox"]:checked{background:var(--orange);border-color:var(--orange)}
.email-preference input[type="checkbox"]:checked:after{
  content:"✓";position:absolute;left:3px;top:-2px;color:#fff;font-size:13px;font-weight:800
}
.email-preference .check-copy{cursor:default}
 .message-field{margin:22px 0}
.message-field label{display:block;color:var(--navy);font-size:13px;font-weight:700;margin-bottom:8px}
.message-field label span{color:#8b8f97;font-weight:500}
.message-field textarea{
  width:100%;min-height:105px;resize:vertical;box-sizing:border-box;
  border:1px solid #d8d9dd;border-radius:12px;background:#fff;
  padding:13px 14px;font:inherit;font-size:13px;line-height:1.5;color:var(--navy);
  outline:none;
}
.message-field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,34,.08)}
.message-field textarea::placeholder{color:#a3a6ac}
.anonymous-option .check-row{display:flex;align-items:flex-start;gap:12px}
.anonymous-option input{
  appearance:none;
  -webkit-appearance:none;
  width:18px;height:18px;margin:2px 0 0;
  border:1.5px solid #c9cbd0;
  border-radius:6px;
  background:#fff;
  flex:0 0 18px;position:relative;cursor:pointer;
  box-sizing:border-box;
}
.anonymous-option input:checked{background:var(--orange);border-color:var(--orange)}
.anonymous-option input:checked:after{
  content:"✓";
  position:absolute;
  left:3px;top:-2px;color:#fff;font-size:13px;
  font-weight:800;
}
.anonymous-option .check-copy{cursor:default}
.anonymous-option .check-copy strong{display:block;color:var(--navy);font-size:14px}
.anonymous-option .check-copy small{display:block;color:#777b83;font-size:11px;margin-top:3px;line-height:1.4}
 .transaction-card{
  margin-top:24px;
  background:var(--cream);
  border:1px solid #e8ebef;
  border-radius:18px;
  padding:22px;
  box-shadow:0 8px 24px rgba(17,26,45,.06);
  box-sizing:border-box;
}
.transaction-card .transaction-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.transaction-card .transaction-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#fff2e9;
  color:var(--orange);
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:850;
  flex:0 0 34px;
}
.transaction-card .payment-label{color:#7d8797;margin:0}
.transaction-card input{
  width:100%;
  height:48px;
  padding:0 15px;
  border:1px solid #dfe3e8;
  border-radius:10px;
  background:#fff;
  color:#111a2b;
  font:inherit;
  box-sizing:border-box;
  outline:none;
}
.transaction-card input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,34,.10)}
.transaction-card .transaction-help{
  font-size:12px;
  color:#777;
  line-height:1.5;
  margin-top:8px;
}
.thank-card{
  background:#fffaf7;
  border:2px solid #f3d8bd;
  border-radius:22px;
  padding:28px 32px;
  display:flex;
  align-items:center;
  gap:18px;
  position:relative;
  overflow:hidden;
  margin-top:24px;
  box-sizing:border-box;
}
.thank-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  background:radial-gradient(circle,#ff6b22 0 64%,#fff0e7 65% 100%);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:25px;
  line-height:1;
  flex:0 0 58px;
  position:relative;
}
.thank-card h3{
  margin:0 0 4px;
  color:#111a2b;
  font-size:19px;
  line-height:1.08;
  letter-spacing:0;
  max-width:760px;
}
.thank-card p{
  margin:0;
  color:#777b83;
  font-size:12px;
  line-height:1.55;
  max-width:600px;
}
.hearts{
  position:absolute;
  inset:0;
  pointer-events:none;
  font-size:0;
  opacity:.25;
}
.hearts span{
  position:absolute;
  color:#ff9c69;
  font-size:30px;
  line-height:1;
}
.hearts span:nth-child(1){top:78px;right:62px}
.hearts span:nth-child(2){bottom:70px;right:165px}
.hearts span:nth-child(3){bottom:70px;right:62px}

/* Thank you */
.final-card{text-align:center;padding:55px 25px}
.final-heart{font-size:46px}
.final-card h2{font-size:39px;letter-spacing:-1.5px;margin:10px 0}
.final-card p{color:var(--muted);max-width:570px;margin:0 auto 20px}
.reference{display:inline-flex;padding:10px 15px;border-radius:10px;background:#f5f5f6;font-family:ui-monospace,monospace;font-weight:800;font-size:13px;margin-bottom:25px}

/* Responsive */
@media(max-width:800px){
  .payment-body{grid-template-columns:1fr}
  .payment-crypto-grid,.crypto-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid.three{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .container{width:calc(100% - 24px)}
  .page-head{padding:42px 0 25px}
  .page-head h1{font-size:37px}
  .progress-label{font-size:8px}.progress:before{left:9%;right:9%}
  .progress-dot{width:34px;height:34px;font-size:10px}
  .step-card{padding:20px 16px;border-radius:18px}
  .form-grid,.form-grid.three{grid-template-columns:1fr}
  .crypto-grid{grid-template-columns:1fr 1fr}
  .payment-panel{padding:18px;border-radius:20px}
  .payment-panel-head{align-items:flex-start;flex-direction:column;gap:6px}
  .payment-crypto-grid{grid-template-columns:1fr 1fr}
  .payment-body{gap:24px}
  .qr-box{width:235px;height:235px}
  #qrcode{width:205px;height:205px;flex-basis:205px}
  #qrcode img,#qrcode canvas{width:205px!important;height:205px!important}
  .thank-card{padding:22px;align-items:flex-start}
  .thank-icon{
    width:58px;
    height:58px;
    flex-basis:58px;
    font-size:25px;
  }
  .thank-card h3{font-size:19px;margin-bottom:4px}
  .thank-card p{font-size:12px}
  .hearts span{font-size:30px}
  .hearts span:nth-child(1){top:20px;right:20px}
  .hearts span:nth-child(2){bottom:18px;right:65px}
  .hearts span:nth-child(3){bottom:18px;right:20px}

  .actions{flex-direction:column-reverse}.actions .btn{width:100%}
}